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

            <form action="" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <section class="row mt-2">

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

                        <div class="add_document">
                            <h2 style="margin-left: 50%;">What needs to be signed?</h2>
                            <div class="add_document2 mt-4">
                                <span class="form-icon">
                                    <img src="{% static 'images/cloud-Icon.png' %}" alt="">
                                </span>
                                <label for="file-input" class="drop-container">
                                    <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>
                                <p id="file-info">No file selected</p>
                                <p>Allowd *.jpeg, *.jpg, *.png, *.pdf, *.docx, *.doc</p>
                                <p>max size of 3.1 MB</p>
                            </div>
                        </div>
                    </section>
                </section>
                <section class="row">

                    <section class="col-lg-8 col-md-12 col-sm-12">
                        <div style="margin-left: 50%;" class="recipients mb-2">



                            <div class="add_recipient mt-4">
                                <h2>Who needs to sign?</h2>
                                <label class="mt-4 mb-4" for="signer">I'm the only signer</label>
                                <input type="checkbox" name="check" id="signer"><br><br>
                                <div class="add_recipient2" id="add_recipient2">

                                    <label for="name_0">Name</label>
                                    <input type="text" name="name_0" class="form-control" id="name_0"><br>
                                    <label for="email_0">Email</label>
                                    <input type="email" name="email_0" class="form-control" id="email_0"><br><br>


                                </div>

                            </div>
                            <button type="button" id="showInputsButton" onclick="createTextbox()"
                                class="btn btn-success inline">Add New</button>
                            <div class="add_message mt-4">
                                <h2>What do you want to tell the recipients?</h2>
                                <label for="subject">Email Subject</label>
                                <input type="text" name="subject" class="form-control" id="subject"><br>
                                <label for="message">Email Message</label>
                                <input type="text" name="message" class="form-control" id="message"><br>


                            </div>
                            <button type="submit" class="btn btn-warning mt-2">Next</button>

                        </div>
                    </section>

            </form>


    </section>

    </section>



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

{% block script %}
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script>
    let counter = 1
    function createTextbox() {
        const container = document.getElementById('add_recipient2');


        const inputSet = document.createElement('div');
        inputSet.classList.add('input-set');

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

        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 = 'btn btn-danger';

        // Create two line breaks
        var br1 = document.createElement('br');
        var br2 = document.createElement('br');

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

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

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


        // Append to the input set
        inputSet.appendChild(nameLabel);
        inputSet.appendChild(nameInput);
        inputSet.appendChild(emailLabel);
        inputSet.appendChild(emailInput);
        inputSet.appendChild(removeButton);
        inputSet.appendChild(br1);
        inputSet.appendChild(br2);
        removeButton.onclick = function () {
            container.removeChild(inputSet);

        };
        container.appendChild(inputSet);
        // Append the input set to the inputSet
        counter++;
    };

    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';
        }
    });
</script>
{% endblock %}