<?php

/**

 * Students Parents/Guardian Information Form

 */

?>

<div id="parents-container">

    <!-- This will be populated by JavaScript based on the current row -->

</div>



<div class="row-counter mt-3">

    <span><i class="fas fa-users me-2"></i>Parents & Guardian Information</span>

</div>



<div class="row">

    <div class="col-md-12" id="parents-fields-container">

        <!-- Fields will be loaded here -->

    </div>

</div>



<script>

function loadParentsFields(rowIndex) {

    const container = document.getElementById('parents-fields-container');

    

    let html = `

        <h6 class="bg-light p-2 mb-3">Father's Information</h6>

        <div class="row">

            <div class="col-md-4 mb-3">

                <label class="form-label">Father's Name</label>

                <input type="text" class="form-control" name="students[${rowIndex}][father_name]" value="${getFieldValue(rowIndex, 'father_name')}">

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Occupation</label>

                <input type="text" class="form-control" name="students[${rowIndex}][father_occupation]" value="${getFieldValue(rowIndex, 'father_occupation')}">

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Phone</label>

                <input type="tel" class="form-control" name="students[${rowIndex}][father_phone]" value="${getFieldValue(rowIndex, 'father_phone')}" placeholder="024XXXXXXX">

            </div>

            <div class="col-md-12 mb-3">

                <label class="form-label">Address</label>

                <textarea class="form-control" name="students[${rowIndex}][father_address]" rows="2">${getFieldValue(rowIndex, 'father_address')}</textarea>

            </div>

        </div>

        

        <h6 class="bg-light p-2 mb-3 mt-3">Mother's Information</h6>

        <div class="row">

            <div class="col-md-4 mb-3">

                <label class="form-label">Mother's Name</label>

                <input type="text" class="form-control" name="students[${rowIndex}][mother_name]" value="${getFieldValue(rowIndex, 'mother_name')}">

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Occupation</label>

                <input type="text" class="form-control" name="students[${rowIndex}][mother_occupation]" value="${getFieldValue(rowIndex, 'mother_occupation')}">

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Phone</label>

                <input type="tel" class="form-control" name="students[${rowIndex}][mother_phone]" value="${getFieldValue(rowIndex, 'mother_phone')}" placeholder="024XXXXXXX">

            </div>

            <div class="col-md-12 mb-3">

                <label class="form-label">Address</label>

                <textarea class="form-control" name="students[${rowIndex}][mother_address]" rows="2">${getFieldValue(rowIndex, 'mother_address')}</textarea>

            </div>

        </div>

        

        <h6 class="bg-light p-2 mb-3 mt-3">Guardian Information</h6>

        <div class="row">

            <div class="col-md-6 mb-3">

                <label class="form-label">Guardian Relationship</label>

                <input type="text" class="form-control" name="students[${rowIndex}][guardian_relationship]" value="${getFieldValue(rowIndex, 'guardian_relationship')}">

            </div>

            <div class="col-md-6 mb-3">

                <label class="form-label">Parents Live Together?</label>

                <select class="form-select" name="students[${rowIndex}][parents_live_together]">

                    <option value="">Select</option>

                    <option value="Yes" ${getFieldValue(rowIndex, 'parents_live_together') == 'Yes' ? 'selected' : ''}>Yes</option>

                    <option value="No" ${getFieldValue(rowIndex, 'parents_live_together') == 'No' ? 'selected' : ''}>No</option>

                </select>

            </div>

        </div>

    `;

    

    container.innerHTML = html;

}



// When switching to parents tab, load fields for all rows

document.addEventListener('DOMContentLoaded', function() {

    const parentsTab = document.getElementById('student-parents-tab');

    if (parentsTab) {

        parentsTab.addEventListener('shown.bs.tab', function() {

            const rows = document.querySelectorAll('.data-row');

            rows.forEach((row, index) => {

                loadParentsFields(index);

            });

        });

    }

});

</script>