js

{% extends 'dashboard/base.html' %}
{% block content %}

<style>
    .delete-icon {
        color: red;
        cursor: pointer;
        font-size: 1.2em;
        background: none;
        border: none;
        padding: 0;
    }
    .address-form {
        position: relative;
        padding: 20px;
        margin-bottom: 20px;
    }
</style>


<!-- Add Font Awesome CSS in the head of your base template or here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">



<div>
    <div >
    <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10" id="kt_create_account_stepper">

{% include 'dashboard/client/snippets/form_sidebar.html' with step=wizard.steps.step1 %}
<div class="w-100">

    <form method="post" class="d-flex flex-column align-items-start gap-3 justify-content-between">
        <!--begin::Progress-->

       <!--end::Progress-->
     {% csrf_token %}
     {{ wizard.management_form }}

   <div class="d-flex justify-content-around w-100">
       <div class="d-flex flex-column align-items-center">
           <h3 class="text-gray-600">Primary Applicant Addresses</h3>
           {{ wizard.form.primary_addresses.management_form }}
           <div id="primary-addresses" class="card card-flush h-lg-10 w-100">
               {% for form in wizard.form.primary_addresses %}
                   <div class="address-form bg-gray px-10 py-2 position-relative w-500px">
                       <button class="btn btn-danger delete-btn position-absolute top-0 end-0 m-2" type="button" onclick="deleteForm('primary', this)" {% if forloop.first and forloop.last %}style="display: none;"{% endif %}>
                           <i class="fas fa-trash-alt"></i>
                       </button>

                       <div class="card-header " id="kt_chat_contacts_header">
                       <div class="card-title">
                           <h2 id="title">{{forloop.counter}} Residential Address</h2>
                       </div>
                   </div>

                       {{ form.as_p }}
                       <div class="separator"></div>

                   </div>
               {% endfor %}
           </div>
           <div class="d-flex justify-content-center gap-2">
               <button class="btn" type="button" onclick="addForm('primary')">
                   <i class="ki-solid ki-plus-square fs-2x text-primary">
                   </i>

               </button>

           </div>
       </div>

       {% if "married" == relationship_val %}
      <div class="d-flex flex-column align-items-center">
        <h3 class="text-gray-600">Secondary Applicant Addresses</h3>
        {{ wizard.form.secondary_addresses.management_form }}
        <div id="secondary-addresses" class="card card-flush h-lg-10">
            {% for form in wizard.form.secondary_addresses %}
                <div class="address-form px-10 py-2 position-relative w-500px">
                    <button class="btn btn-danger delete-btn position-absolute top-0 end-0 m-2" type="button" onclick="deleteForm('secondary', this)" {% if forloop.first and forloop.last %}style="display: none;"{% endif %}>
                        <i class="fas fa-trash-alt"></i>
                    </button>

                    <div class="card-header ">
                        <div class="card-title">
                            <h2 id="title">{{forloop.counter}} Residential Address</h2>
                        </div>
                    </div>

                    {{ form.as_p }}
                </div>
            {% endfor %}
        </div>
        <div class="d-flex justify-content-center">

        <button class="btn" type="button" onclick="addForm('secondary')">
            <i class="ki-solid ki-plus-square fs-2x text-primary">
            </i>
        </button>
        </div>
    </div>
    {% endif %}
   </div>

   <div class="d-flex justify-content-between m-2 p-2 gap-2">
       <button class="btn btn-primary " type="submit" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">Previous</button>
       <button class="btn btn-primary " type="submit">{% if wizard.steps.prev %}Next Step{% else %}Submit{% endif %}</button>
   </div>







   {% if form.errors %}
   <div class="form-errors">
       <ul>
           {% for field in form %}
               {% if field.errors %}
                   <li><strong>{{ field.label }}:</strong> {{ field.errors }}</li>
               {% endif %}
           {% endfor %}
       </ul>
   </div>
   {% endif %}

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









<script>
function addForm(prefix) {
    const formsDiv = document.getElementById(`${prefix}-addresses`);
    const totalForms = document.getElementById(`id_${prefix}-TOTAL_FORMS`);

    if (!totalForms) {
        console.error(`Total forms element not found for ${prefix}`);
        return;
    }

    const newForm = formsDiv.children[0].cloneNode(true);
    const formRegex = new RegExp(`${prefix}-(\\d+)-`, 'g');
    const formNum = totalForms.value;

    Array.from(newForm.querySelectorAll('*')).forEach(element => {
        if (element.id) {
            element.id = element.id.replace(formRegex, `${prefix}-${formNum}-`);
        }
        if (element.name) {
            element.name = element.name.replace(formRegex, `${prefix}-${formNum}-`);
        }
    });

    newForm.querySelector('#title').innerHTML = `${parseInt(formNum)+1} Residential Address`;

    // Clear input values in the new form
    newForm.querySelectorAll('input, select, textarea').forEach(input => {
        input.value = '';
    });

    // Ensure the delete button is visible and has the correct onclick
    const deleteBtn = newForm.querySelector('.delete-btn');
    deleteBtn.style.display = 'block';
    deleteBtn.onclick = function() { deleteForm(prefix, this); };

    formsDiv.appendChild(newForm);

    totalForms.value = parseInt(totalForms.value) + 1;
    updateDeleteButtons(prefix);
}

function deleteForm(prefix, button) {
    const formsDiv = document.getElementById(`${prefix}-addresses`);
    const totalForms = document.getElementById(`id_${prefix}-TOTAL_FORMS`);

    button.closest('.address-form').remove();
    totalForms.value = parseInt(totalForms.value) - 1;

    // Renumber the remaining forms
    const forms = formsDiv.children;
    for (let i = 0; i < forms.length; i++) {
        const title = forms[i].querySelector('#title');
        title.innerText = `${i + 1} Residential Address`;

        const formRegex = new RegExp(`${prefix}-(\\d+)-`, 'g');
        Array.from(forms[i].querySelectorAll('*')).forEach(element => {
            if (element.id) {
                element.id = element.id.replace(formRegex, `${prefix}-${i}-`);
            }
            if (element.name) {
                element.name = element.name.replace(formRegex, `${prefix}-${i}-`);
            }
        });
    }

    updateDeleteButtons(prefix);
}

function updateDeleteButtons(prefix) {
    const formsDiv = document.getElementById(`${prefix}-addresses`);
    const deleteButtons = formsDiv.querySelectorAll('.delete-btn');

    if (deleteButtons.length === 1) {
        deleteButtons[0].style.display = 'none';
    } else {
        deleteButtons.forEach(btn => btn.style.display = 'block');
    }
}

// Initialize delete buttons on page load
document.addEventListener('DOMContentLoaded', function() {
    updateDeleteButtons('primary');
    updateDeleteButtons('secondary');
});
</script>
{% endblock %}