<?php

/**

 * Students Contact Information Form

 */

?>

<div id="contact-container">

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

</div>



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

    <span><i class="fas fa-address-book me-2"></i>Contact Information</span>

</div>



<div class="row">

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

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

    </div>

</div>



<script>

function loadContactFields(rowIndex) {

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

    

    let html = `

        <div class="row">

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

                <label class="form-label">Parent/Guardian Name</label>

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

            </div>

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

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

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

            </div>

        </div>

        <div class="row">

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

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

                <input type="email" class="form-control" name="students[${rowIndex}][email]" value="${getFieldValue(rowIndex, 'email')}" placeholder="example@email.com">

            </div>

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

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

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

            </div>

        </div>

        

        <h6 class="bg-light p-2 mb-3 mt-3">Emergency Contact</h6>

        <div class="row">

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

                <label class="form-label">Emergency Contact Name</label>

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

            </div>

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

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

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

            </div>

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

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

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

            </div>

        </div>

    `;

    

    container.innerHTML = html;

}



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

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

    const contactTab = document.getElementById('student-contact-tab');

    if (contactTab) {

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

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

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

                loadContactFields(index);

            });

        });

    }

});

</script>