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

            <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>


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


            <section class="row">
                <section class="col-lg-3 col-md-12 col-sm-12 mb-2">
                    <div id="get_started">
                        <h4 class="pt-3">Get Started or Use Templates </h4>
                        <div class="start text-center">
                            <p class="">Sign or get signatures</p>
                            <button id="add_document_btn" class="btn btn-primary mt-2" type="button"
                                data-bs-toggle="modal" data-bs-target="#addDocumentModal">Start</button>
                        </div>
                    </div>
                </section>

                <section class="col-lg-9 col-md-12 col-sm-12">
                    <div class="my_documents">
                        <h3 class="mb-4">My own sign documents</h3>

                        {% if data %}
                        <table class="table" id="own_sign">
                            <thead>
                                <tr>
                                    <th scope="col">DOCUMENT</th>

                                    <th scope="col" class="own_column" data-column="sign_at" data-order="desc">SIGN AT
                                    </th>
                                    <th scope="col">ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in data %}
                                <tr>
                                    <td>
                                        {{i.main_document.name}}
                                    </td>

                                    <td><i class="fa-solid fa-calendar-days"></i>{{i.created_at}}</td>


                                    <td>
                                        <div style="display: flex;gap: 2px;">
                                            <a href="{% url 'download_own_document' i.id %}"><img
                                                    src="{% static 'images/Download.png' %}" width="24px" height="24px"
                                                    alt=""></a>
                                            <button id="agreement_delete_btn" data-id="{{i.id}}"
                                                onclick="own_agreement_delete({{i.id}})" type="button"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal"><img
                                                    src="{% static 'images/Icon_delete.png' %}" width="16px"
                                                    height="16px" alt=""></button>
                                        </div>

                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <h4>No data can be found</h4>
                        {% endif %}
                    </div>
                </section>
                <div class="modal fade" id="addDocumentModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
                        <div class="modal-content">

                            <button type="button" class="close ms-auto popup_close" data-bs-dismiss="modal"
                                aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>

                            <form action="{% url 'add_document' %}" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="modal-body">


                                    <h2 class="text-center-sm">What needs to be signed?</h2>
                                    <div class="add_document2 mt-3" id="add_document2">

                                        <label for="file-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="file-input" 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>
                                    <p class="text-center mt-3">Allowd *.jpeg, *.jpg, *.png, *.pdf, *.docx, *.doc</p>
                                    <p class="text-center">max size of 3.1 MB</p>
                                    <hr>
                                    <div class="recipients">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <h2>Who needs to sign?</h2>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="recipients2 float-end">
                                                    <label class="float-right" for="signer">I'm the only signer</label>
                                                    <input type="checkbox" name="check" id="signer">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="add_recipient mt-4" id="add_recipient">
                                        <div class="row p-0">
                                            <div class="col-sm-12 col-md-12 col-lg-6 mt-2">
                                                <label for="name_0">Name</label>
                                                <input type="text" name="name_0" class="form-control" id="name_0">
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6 mt-2">
                                                <label for="email_0">Email</label>
                                                <input type="email" name="email_0" class="form-control" id="email_0">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" id="showInputsButton"
                                        class="btn btn-primary float-end mt-3">Add New</button>
                                    <br><br>
                                    <h2 class="mt-2">What do you want to tell the recipients?</h2>
                                    <div class="add_message mt-4">

                                        <div class="row">
                                            <div class="col-sm-12 col-md-12 col-lg-6 mt-2">
                                                <label for="subject">Email Subject</label>
                                                <input type="text" name="subject" class="form-control" id="subject">
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6 mt-2">
                                                <label for="message">Email Message</label>
                                                <input type="text" name="message" class="form-control" id="message">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="text-center">
                                        <button type="submit mt-2" id="next_btn"
                                            class="btn btn-primary mt-2">Next</button>
                                    </div>



                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered delete_modal" role="document">
                        <div class="modal-content text-center">

                            <div class="modal-body">

                                <img src="/static/images/remove 1.png" width="86px" height="86px" class="my-5" alt="">
                                <h2>Are You Sure?</h2>
                                <p>Do you really want to delete this Agreement</p>
                                <a id="new_delete_agreement" href="#" class="btn btn-danger">YES</a><br><br>
                                <a href="{% url 'delete_own_agreement_cancel' %}" class="btn btn-secondary">NO</a>

                            </div>

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

            </section>
            <div class="search_container mt-2">
                <div class="row">
                    <h3>Search filter</h3>
                    <form action="" method="post" class="row align-items-end mt-2">
                        {% csrf_token %}
                        <div class="col-lg-3 col-md-3 col-sm-6">
                            <label for="document_name" class="form-label">Document Name:</label>
                            <input type="text" name="document_name" id="document_name" class="form-control">
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6">
                            <label for="email" class="form-label">Email:</label>
                            <input type="email" name="email" id="email" class="form-control">
                        </div>
                        <div class="col-lg-2 col-md-3 col-sm-6">
                            <label for="sent_date" class="form-label">Sent Date:</label>
                            <input type="date" name="sent_date" class="form-control" id="sent_date">
                        </div>
                        <div class="col-lg-2 col-md-3 col-sm-6">
                            <label for="sign_date" class="form-label">Sign Date:</label>
                            <input type="date" name="sign_date" class="form-control" id="sign_date">
                        </div>
                        <div class="col-lg-2 col-md-12 col-sm-12 mt-4">
                            <button type="button" class="btn btn-primary" id="search_btn">Search</button>
                        </div>
                        <div class="col-lg-3 col-md-12 col-sm-12 mt-4">
                            <h5 id="search_result"></h5>
                        </div>
                    </form>
                </div>
            </div>

            <section class="row mt-2">
                <section class="col-lg-12 col-md-12 col-sm-12">
                    <div class="sendme_documents">
                        <h3 class="mb-4 ml-0">Documents send to me</h3>

                        {% if documents_send_to_me %}
                        <table class="table" id="send_me_table">
                            <thead>
                                <tr>
                                    <th scope="col">DOCUMENT</th>

                                    <th scope="col">SEND FROM</th>

                                    <th scope="col" class="sendme_column" data-column="sendat" data-order="desc">SEND AT
                                    </th>
                                    <th scope="col" class="sendme_column" data-column="signat" data-order="desc">SIGN AT
                                    </th>
                                    <th scope="col">ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in documents_send_to_me %}
                                <tr>
                                    <td>
                                        {{i.main_document.main_document.name}}
                                    </td>
                                    <td>{{i.user.get_full_name}}</td>
                                    <td><i class="fa-solid fa-calendar-days"></i>{{i.created_at}}</td>
                                    {% if i.sign_at %}
                                    <td><i class="fa-solid fa-calendar-days"></i>{{i.sign_at}}</td>
                                    {% else %}
                                    <td></td>
                                    {% endif %}
                                    <td>
                                        <div style="display: flex;gap: 2px;">
                                            {% if i.is_sign %}
                                            <a href="{% url 'download_recipient_document' i.id %}"><img
                                                    src="{% static 'images/Download.png' %}" width="24px" height="24px"
                                                    alt=""></a>
                                            {% else %}
                                            <a href="{{i.link}}"><img src="{% static 'images/User.png' %}" width="24px"
                                                    height="24px" alt=""></a>
                                            {% endif %}
                                            <button id="delete_btn" data-id="{{i.id}}"
                                                onclick="delete_recipient_agreement({{i.id}})" type="button"
                                                data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><img
                                                    src="{% static 'images/Icon_delete.png' %}" width="16px"
                                                    height="16px" alt=""></button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <h4>No data can be found</h4>
                        {% endif %}
                    </div>
                </section>
                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered delete_modal" role="document">
                        <div class="modal-content text-center">

                            <div class="modal-body">

                                <img src="/static/images/remove 1.png" width="86px" height="86px" class="my-5" alt="">
                                <h2>Are You Sure?</h2>
                                <p>Do you really want to delete this Agreement</p>
                                <a id="new_delete_btn" href="#" class="btn btn-danger">YES</a><br><br>
                                <a href="{% url 'delete_agreement_cancel' %}" class="btn btn-secondary">NO</a>

                            </div>

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


            </section>

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

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

        </div>
    </footer>


</div>
</section>
<script>
    const search_btn = document.getElementById('search_btn');
    const search_result = document.getElementById('search_result');
    search_btn.addEventListener('click', function (e) {
       
        const document_name = document.getElementById('document_name').value;
        const email = document.getElementById('email').value;
        console.log(document_name);
        const sent_date = document.getElementById('sent_date').value;
        const sign_date = document.getElementById('sign_date').value;


        const data = {
            document_name: document_name || null, // Assign null if the value is empty
            email: email || null,
            sent_date: sent_date || null,
            sign_date: sign_date || null
        };


        console.log('Data being sent:', data);
        fetch('', {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{csrf_token}}'
            },
            body: JSON.stringify(data) 
        })
            .then(response => response.json())
            .then(data => {
                if (data) {
                    search_result.innerHTML = `Search results found: ${data.results}`
                    console.log(data);
                    var data = data.data;
                    var table = document.getElementById('send_me_table').getElementsByTagName('tbody')[0];
                    table.innerHTML = '';
                    for (var i = 0; i < data.length; i++) {

                        if (data[i].is_sign == true) {
                            var row = `<tr>
                            <td>${data[i].document_name}</td>
                            <td>${data[i].sent_from}</td>
                            <td><i class="fa-solid fa-calendar-days"></i>${data[i].sent_at}</td>
                            <td><i class="fa-solid fa-calendar-days"></i>${data[i].sign_at}</td>
                            <td>
                                <div style="display: flex;gap: 2px;">
                                        <a href="/download-recipient_document/${data[i].id}"><img src="{% static 'images/Download.png' %}" width="24px" height="24px" alt=""></a>
                                        <button id="delete_btn" data-id="${data[i].id}" type="button"
                                                data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><img src="{% static 'images/Icon_delete.png' %}" width="16px" height="16px" alt=""></button>
                                </div>
                            </td>
                        `


                        } else {
                            var row = `<tr>
                            <td>${data[i].document_name}</td>
                            <td>${data[i].sent_from}</td>
                            <td><i class="fa-solid fa-calendar-days"></i>${data[i].sent_at}</td>
                            <td></td>
                            <td>
                                <div style="display: flex;gap: 2px;">
                                    <a href="${data[i].link}"><img src="{% static 'images/User.png' %}" width="24px" height="24px" alt=""></a>
                                    <button id="delete_btn" data-id="${data[i].id}" type="button"
                                            data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><img src="{% static 'images/Icon_delete.png' %}" width="16px" height="16px" alt=""></button>
                                </div>
                            </td>
                        `
                        }

                        table.innerHTML += row;
                    }

                }
            })
    })
    function delete_recipient_agreement(id) {
        const new_delete_btn = document.getElementById('new_delete_btn');
        let href = `/agreement-delete/${id}`;
        new_delete_btn.href = href;
    }

    function own_agreement_delete(id) {
        const new_delete_agreement = document.getElementById('new_delete_agreement');
        console.log(agreement_id);
        let agreement_href = `/delete-own-agreement/${id}`;
        new_delete_agreement.href = agreement_href;
    }
    document.addEventListener('DOMContentLoaded', (event) => {


        var myarray = '{{json_data|escapejs}}';
        var myarray = JSON.parse(myarray)
        console.log(myarray);

        $('.own_column').on('click', function () {
            var column = $(this).data('column');
            var order = $(this).data('order')
            console.log('column click', column, order);
            if (order == 'desc') {
                $(this).data('order', 'asc')
                myarray = myarray.sort((a, b) => a[column] > b[column] ? 1 : -1)
                console.log(myarray)
            } else {
                $(this).data('order', 'desc')
                myarray = myarray.sort((a, b) => a[column] < b[column] ? 1 : -1)
                console.log(myarray)
            }
            buildTable(myarray)
        })

        function buildTable(data) {
            var table = document.getElementById('own_sign').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            for (var i = 0; i < data.length; i++) {

                var row = `<tr>
                                <td>${data[i].document}</td>
                                <td><i class="fa-solid fa-calendar-days p-2"></i>${data[i].sign_at}</td>
                                <td>
                                    <a href="/download-own-document/${data[i].id}"></a><img src="{% static 'images/Download.png' %}" width="24px" height="24px" alt="">
                                    <button id="agreement_delete_btn" data-id="${data[i].id}" type="button"
                                                    data-bs-toggle="modal" data-bs-target="#exampleModal"><img src="{% static 'images/Icon_delete.png' %}" width="16px" height="16px" alt=""></button>
                                </td>
                          `

                table.innerHTML += row;
            }
        }

        var myarray2 = '{{sendme_json_data|escapejs}}';
        var myarray2 = JSON.parse(myarray2)
        console.log(myarray2);

        $('.sendme_column').on('click', function () {
            var column = $(this).data('column');
            var order = $(this).data('order')
            console.log('column click', column, order);
            if (order == 'desc') {
                $(this).data('order', 'asc')
                myarray = myarray2.sort((a, b) => a[column] > b[column] ? 1 : -1)
                console.log(myarray)
            } else {
                $(this).data('order', 'desc')
                myarray = myarray2.sort((a, b) => a[column] < b[column] ? 1 : -1)
                console.log(myarray)
            }
            buildTable2(myarray2)
        })

        function buildTable2(data) {
            var table = document.getElementById('send_me_table').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            for (var i = 0; i < data.length; i++) {

                if (data[i].is_sign == true) {
                    var row = `<tr>
                                <td>${data[i].document}</td>
                                <td>${data[i].send_from}</td>
                                <td><i class="fa-solid fa-calendar-days"></i>${data[i].sent_at}</td>
                                <td><i class="fa-solid fa-calendar-days"></i>${data[i].sign_at}</td>
                                <td>
                                    <div style="display: flex;gap: 2px;">
                                            <a href="/download-recipient_document/${data[i].id}"><img src="{% static 'images/Download.png' %}" width="24px" height="24px" alt=""></a>
                                            <button id="delete_btn" data-id="${data[i].id}" type="button"
                                                    data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><img src="{% static 'images/Icon_delete.png' %}" width="16px" height="16px" alt=""></button>
                                    </div>
                                </td>
                          `


                } else {
                    var row = `<tr>
                                <td>${data[i].document}</td>
                                <td>${data[i].send_from}</td>
                                <td><i class="fa-solid fa-calendar-days"></i>${data[i].sent_at}</td>
                                <td></td>
                                <td>
                                    <div style="display: flex;gap: 2px;">
                                        <a href="${data[i].link}"><img src="{% static 'images/User.png' %}" width="24px" height="24px" alt=""></a>
                                        <button id="delete_btn" data-id="${data[i].id}" type="button"
                                                data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><img src="{% static 'images/Icon_delete.png' %}" width="16px" height="16px" alt=""></button>
                                    </div>
                                </td>
                          `
                }

                table.innerHTML += row;
            }
        }



        let counter = 1
        document.getElementById('showInputsButton').addEventListener('click', function () {
            console.log('call');
            const container = document.getElementById('add_recipient');


            const row_div = document.createElement('div');
            row_div.classList.add('row');
            row_div.classList.add('mt-3');
            const col_div1 = document.createElement('div');
            col_div1.classList.add('col-sm-12');
            col_div1.classList.add('col-md-12');
            col_div1.classList.add('col-lg-6');


            const col_div2 = document.createElement('div');
            col_div2.classList.add('col-sm-12');
            col_div2.classList.add('col-md-12');
            col_div2.classList.add('col-lg-6');

            // Create Name label and input
            const nameLabel = document.createElement('label');
            nameLabel.textContent = 'Name:';


            const nameInput = document.createElement('input');
            nameInput.type = 'text';
            nameInput.name = `name_${counter}`
            nameInput.classList = 'form-control';

            var removeButton = document.createElement('button');
            removeButton.innerHTML = '<i class="fa-solid fa-trash"></i>';
            removeButton.classList.add = 'text-danger';
            removeButton.type = 'button';


            // Create Email label and input
            const emailLabel = document.createElement('label');
            emailLabel.textContent = 'Email:';


            const emailInput = document.createElement('input');
            emailInput.type = 'email';

            emailInput.name = `email_${counter}`
            emailInput.classList = 'form-control';


            // Append to the input set
            col_div1.appendChild(nameLabel);
            col_div1.appendChild(nameInput);
            col_div2.appendChild(emailLabel);
            col_div2.appendChild(emailInput);
            row_div.appendChild(col_div1);
            row_div.appendChild(col_div2);


            removeButton.onclick = function () {
                container.removeChild(row_div);
                container.removeChild(removeButton);
            };
            container.appendChild(row_div);
            container.appendChild(removeButton);
            // Append the input set to the inputSet
            counter++;
        });

        const cancel_btn = document.getElementById('cancel_btn')
        const fileInfoDisplay = document.getElementById('file-info');
        const fileInput = document.getElementById('file-input')
        fileInput.addEventListener('change', uploadImage);

        function uploadImage() {
            console.log(fileInput.files[0]);
            if (fileInput.files.length > 0) {
                console.log(fileInput.files[0]);
                document.getElementById('drop-container').classList.add('hidden');
                fileInfoDisplay.textContent = `${fileInput.files[0].name}`;
                // let imgLink = URL.createObjectURL(fileInput.files[0]); 
                // fileInfoDisplay.style.backgroundImage = `url(${imgLink})`;

                document.getElementById('add_document2').classList.add('upload_display');
                document.getElementsByClassName('form-icon')[0].classList.add('hidden');
                fileInfoDisplay.style.fontSize = '25px';
                fileInfoDisplay.style.fontWeight = '600';
                fileInfoDisplay.style.color = '#000000';
                cancel_btn.classList.remove('hidden');
            } else {
                fileInfoDisplay.textContent = 'No file selected';
                fileInfoDisplay.style.fontSize = '12px';
                fileInfoDisplay.style.fontWeight = '500';
                fileInfoDisplay.style.color = '#737B8B';
            }
        }
        const dropContainer = document.getElementById('drop-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');
            uploadImage();
        })
        cancel_btn.addEventListener('click', () => {
            document.getElementById('file-input').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');
            document.getElementsByClassName('form-icon')[0].classList.remove('hidden');
            cancel_btn.classList.add('hidden');
        })

        var checkbox = document.getElementById('signer');
        var recipientDiv = document.querySelector('.add_recipient');
        var messageDiv = document.querySelector('.add_message');
        var add_btn = document.querySelector('#showInputsButton');

        if (checkbox && recipientDiv) {
            checkbox.addEventListener('change', function () {
                if (this.checked) {
                    recipientDiv.style.display = 'none';
                    messageDiv.style.display = 'none';
                    add_btn.style.display = 'none';
                } else {
                    recipientDiv.style.display = 'block';
                    messageDiv.style.display = 'block';
                    add_btn.style.display = 'block';
                }
            });
        } else {
            console.error('Elements not found');
        }
    });

</script>
</div>
{% endblock %}