{{ extends 'global/Page.html' }}
{{ block title }}About you{{ endblock }}

{{ block content }}

<p style = "color: #3F83C8;">
    <b>Please answer all the questions which apply to you:</b>
</p>
<p>
    {{ formfield 'religious' }}
</p>
<p>
    {{ formfield 'other_religious' }}
</p>
<hr>
<p>
    {{ formfield 'Education' }}
</p>
<hr>
<p>
    {{formfield 'other_education'}}
</p>
<hr>
<p>
    {{ formfield 'Physical_mental' }}
</p>
<hr>
<p>
    {{ formfield 'Height' }}
</p>
<hr>
<p>
    {{ formfield 'Employment_status' }}
</p>
<hr>
<p>
    {{ formfield 'Parents_house'}}
</p>
<hr>
<p>
    {{ formfield 'Parent_household_income' }}
</p>
<hr>
<p>
    {{ formfield 'Household_income' }}
</p>
<hr>
<p>
    {{ formfield 'socio_economic_status' }}
</p>
<p>
    {{ formfield 'other_socio_eco' }}
</p>
<hr>
<p>
    {{formfield 'have_children'}}
</p>
<label for="have_children" style="margin-bottom: 20px;">If <b><u>Yes</u></b>, please complete the following fields for a every child born, starting with the first born: </label>
<hr>

<form id="child-form" method="post">
<table id="children-table">
        <thead>
            <tr>
                <th>Child Birth Order e.g. 1st, 2nd, 3rd</th>
                <th>Year of Birth</th>
                <th>Sex at Birth</th>
                <th>Still Alive (Yes/No)</th>
                <th>If No, Year of Death</th>
            </tr>
        </thead>
        <tbody>
            <tr id="childRowTemplate">
                <td><input type="text" class="childName"></td>
                <td><input type="text" class="childYearOfBirth"></td>
                <td><input type="text" class="childSexAtBirth"></td>
                <td><input type="text" class="childStillAlive"></td>
                <td><input type="text" class="childYearOfDeath"></td>
            </tr>
        </tbody>
    </table> 
    <input type="hidden" name="child_birth_order" id="child-birth-order">
    <input type="hidden" name="child_birth_years" id="child-birth-years">
    <input type="hidden" name="child_sex_at_birth" id="child-sex-at-birth">
    <input type="hidden" name="child_still_alive" id="child-still-alive">
    <input type="hidden" name="child_year_of_death" id="child-year-of-death">
    
    <button id="add-child">Add Child</button>
    <button type="submit" id="submit-form">Next</button>
</form>

{{ formfield_errors 'child_birth_order' }}
{{ formfield_errors 'child_birth_years' }}
{{ formfield_errors 'child_sex_at_birth' }}
{{ formfield_errors 'child_still_alive' }}
{{ formfield_errors 'child_year_of_death' }}

<hr>
<div style> <img src="{% static "UCL/UCL.png" %}"width="950"/>  
</div>

{{ endblock }}

{{ block scripts }}
<script>

    function isNumeric(value) {
        return /^\d+$/.test(value);
    }

    function addRow() {
        var table = document.getElementById("children-table").getElementsByTagName('tbody')[0];
        var newRow = table.insertRow(table.rows.length);
        var cellCount = table.rows[0].cells.length;

        for (var i = 0; i < cellCount; i++) {
            var cell = newRow.insertCell(i);
            var input = document.createElement("input");
            input.type = "text";
            input.addEventListener("input", updateHiddenFields);
            cell.appendChild(input);
        }

        // After adding a row, update the hidden fields with the current table data
        updateHiddenFields();
    }

    function updateHiddenFields() {
        var table = document.getElementById("children-table");
        var tbody = table.getElementsByTagName('tbody')[0];
        var rows = tbody.getElementsByTagName('tr');
        var birthOrder = [];
        var birthYears = [];
        var sexAtBirth = [];
        var stillAlive = [];
        var yearOfDeath = [];

        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName('td');
            var birthOrderValue = cells[0].querySelector('input').value;
            birthOrder.push(isNumeric(birthOrderValue) ? parseInt(birthOrderValue) : '');
            var birthYearValue = cells[1].querySelector('input').value;
            birthYears.push(isNumeric(birthYearValue) ? parseInt(birthYearValue) : '');
            sexAtBirth.push(cells[2].querySelector('input').value);
            stillAlive.push(cells[3].querySelector('input').value);
            var yearOfDeathValue = cells[4].querySelector('input').value;
            yearOfDeath.push(isNumeric(yearOfDeathValue) ? parseInt(yearOfDeathValue) : '');
        }

        // Update the hidden form fields with the column data
        document.getElementById("child-birth-order").value = JSON.stringify(birthOrder);
        document.getElementById("child-birth-years").value = JSON.stringify(birthYears);
        document.getElementById("child-sex-at-birth").value = JSON.stringify(sexAtBirth);
        document.getElementById("child-still-alive").value = JSON.stringify(stillAlive);
        document.getElementById("child-year-of-death").value = JSON.stringify(yearOfDeath);
    }

    document.getElementById("add-child").addEventListener("click", function () {
        addRow();
    });

    document.getElementById("add-child").addEventListener("click", function (event) {
        event.preventDefault();
    });

    document.getElementById("child-form").addEventListener("submit", function (event) {
        // Ensure the hidden fields are up to date before submitting the form
        updateHiddenFields();
    });


</script>
{{ endblock }}