{% extends 'base.html' %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-md-11  my-5">
            <div class="row">
            
            {% for k, v in section_names.items %}
                {% if k == page_no  %}
                <div class="col text-center">
                    <i class="fa-regular fa-2x fa-circle-dot"></i><br />
                    <b> {{v}} </b>
                </div>
                {% else %}
                <div class="col text-center">
                    <a class="nodecoration" href=" {% url 'project_edit_page_'|add:k pk=project.project_id %}">
                    <i class="fa-regular fa-2x fa-circle"></i><br />
                    {{v}}
                    </a>
                </div>
                {%endif%}
            {% endfor %}
            
                <div class="col text-center">
                    <a class="nodecoration" href=" {% url 'project_edit_summary_page' pk=project.project_id %}" >
                    <i class="fa-regular fa-2x fa-square"></i><br />
                    Review
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">  
    <div class="row justify-content-center ">
        <div class="col-12 col-lg-7 ms-3 mb-4 mt-5">
            <h2 class="d-inline"><b>Data Recipients</b></h2>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-12 col-lg-7 ">
            Please provide details for each of the data recipients. You can add data recipients at a later date.
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-12 col-lg-7">
            <form id="editprojectform" method="POST" action="{% url 'project_edit_page_3' pk=project.project_id %}" enctype="multipart/form-data">
                {% csrf_token %}  
                <input type="hidden" name="action_type" id="action_type" value="">
                {{ formset.management_form }}
      
                {% for form in formset %}
                <table>
                    <h4 class="h5 mt-5">Data Recipient {{ forloop.counter }}:</h4>
                    {{ form.as_table }}
                </table>
                {% endfor %}

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

<hr>        
                
                <div class="row justify-content-center mb-5" >
                    <div class="col-1 mt-3 mb-5 text-start">
                        {% if page_no != '1' %}
                        <a class="btn btn-dark hover-white bold-font" href=" {% url 'project_edit_page_2' pk=project.project_id %}" onclick="submitForm()"><i class="fa-solid fa-circle-arrow-left"></i> Prev</a>
                      {% endif %}
                    </div>
                    
                    <div class="col-2 mt-3 mb-5 text-end">
                        <button form="editprojectform" type="submit" class="btn btn-outline-secondary hover-white" onclick="document.getElementById('action_type').value='save'"><i class="fa-solid fa-floppy-disk"></i> Save</button>
                    </div>
                    <div class="col-2 mt-3 mb-5 text-start">
                        <a href="{% url 'summary' %}" class="btn btn-secondary hover-white" ><i class="fa-solid fa-door-open"></i> Exit</a>
                    </div>
     
                    <div class="col-1 mt-3 mb-5 text-end">
                        <button form="editprojectform" type="submit" class=" btn btn-dark hover-white bold-font" onclick="document.getElementById('action_type').value='next'">Next <i class="fa-solid fa-circle-arrow-right"></i></button>  
                    </div>
                </div>

<script>
    $('#editprojectform').submit(function(event)
        {
            if (event.originalEvent.submitter.name === 'jsonSubmit')
            {
                event.preventDefault();
                var formData = $(this).serialize();
                              
                contentType = 'application/x-www-form-urlencoded;charset=utf-8';
        
                $.ajax({
                    headers: {
                        'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val(),  
                      },
                type: "POST",
                url: window.location.href,
                data: formData,
                contentType: contentType,
                success: function(response) {
                    showToast('Form successfully saved', 3000)
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    // Handle error, e.g., display an error message
                    console.error(xhr.responseText);
                }
                });
            }
        });


        function submitForm()
        {
            var formData = $('#editprojectform').serialize();        
            contentType = 'application/x-www-form-urlencoded;charset=utf-8';
            $.ajax({
                    headers: {
                        'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val(),  
                    },
                type: "POST",
                url: window.location.href,
                data: formData,
                contentType: contentType,
                success: function(response) {
                    showToast('Form successfully saved', 3000)
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    // Handle error, e.g., display an error message
                    console.error(xhr.responseText);
                }
            });
        }

</script>

<script>
    function showToast(message, duration = 3000) {
        // Create a new toast element
        var toast = document.createElement('div');
        toast.classList.add('toast');
        toast.setAttribute('role', 'alert');
        toast.setAttribute('aria-live', 'assertive');
        toast.setAttribute('aria-atomic', 'true');
        toast.setAttribute('data-bs-delay', duration);

        // Create toast body
        var toastBody = document.createElement('div');
        toastBody.classList.add('toast-body');
        toastBody.textContent = message;

        // Append body to toast
        toast.appendChild(toastBody);

        // Append toast to container
        document.getElementById('toastContainer').appendChild(toast);

        // Create a Bootstrap Toast instance
        var bsToast = new bootstrap.Toast(toast);

        // Show the toast
        bsToast.show();

        // Remove the toast after the specified duration
        setTimeout(function () {
            toast.remove();
        }, duration);
    }
</script>



{% endblock %}