{% extends 'base.html' %}

{% load i18n %}
{% load widget_tweaks %}

{% block title %}{% trans "Qualification - Step 2" %}{% endblock %}

{% block content %}

    <article class="mt-12">

        <h1 class="text-3xl">
          Your Qualifications
        </h1>

        <p class="mt-2">
          Enter your qualifications, the more you can enter, the better!
        </p>

    </article>


    <form class="mt-8" method="post" action="{% url 'setup_flow_2' %}" id="qualificationForm">
        {% csrf_token %}

        {{ formset.management_form }}

        <div id="formsetContainer">
            {% for form in formset %}
                <div class="formset-row">
                    {{ form.id }}


                    <div class="mt-5">
                      <label for="id_form-0-name" class="cursor-pointer">Qualification Name</label>
                      {{ form.name|add_class:"mt-2 w-full border border-body/10 focus:border-body/60 bg-bgColor rounded-lg p-3 outline-none"|attr:"placeholder:NVQ in care" }}
                    </div>

                    {% if form.non_field_errors %}
                        <div class="mt-5 errors space-y-3">{{ form.non_field_errors }}</div>
                    {% endif %}

                    {% if field.errors %}
                        {% for field in form.visible_fields %}
                            <div class="mt-5 errors space-y-3">{{ field.errors }}</div>
                        {% endfor %}
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <button
            type="button"
            id="addFormButton"
            class="btn mt-7 bg-body text-white p-3 rounded-md cursor-pointer"
        >
            Add another qualification
        </button>

        <button
            type="submit"
            class="btn mt-14 w-full bg-body text-white p-3 rounded-md cursor-pointer"
        >
            That's all my qualifications
        </button>
    </form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var formIndex = {{ formset.total_form_count }};
    var formsetContainer = document.getElementById('formsetContainer');
    var addFormButton = document.getElementById('addFormButton');
    var totalForms = document.getElementById('id_{{ formset.prefix }}-TOTAL_FORMS');

    addFormButton.addEventListener('click', function() {
        var newForm = formsetContainer.children[0].cloneNode(true); // Clone the first form
        var formRegex = RegExp('({{ formset.prefix }}-\\d+)'); // Regex to find the form index

        // Update the new form elements
        var formElements = newForm.querySelectorAll('label, input, select, textarea');
        formElements.forEach(function(element) {
            if (element.tagName === 'LABEL') {
                element.htmlFor = element.htmlFor.replace(formRegex, '{{ formset.prefix }}-' + formIndex);
            } else {
                element.name = element.name.replace(formRegex, '{{ formset.prefix }}-' + formIndex);
                element.id = element.id.replace(formRegex, '{{ formset.prefix }}-' + formIndex);
                // Reset the value of the input
                if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
                    element.value = '';
                }
                // Reset selected option for select elements
                if (element.tagName === 'SELECT') {
                    element.selectedIndex = -1;
                }
            }
        });

        // Insert the new form at the end of the formset
        formsetContainer.appendChild(newForm);

        // Increment the form index and update the TOTAL_FORMS count
        formIndex++;
        totalForms.setAttribute('value', formIndex);
    });
});
</script>

{% endblock %}