<?php

/**

 * Staff Next of Kin Information Form

 */

?>

<div id="staff-nok-container">

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

</div>



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

    <span><i class="fas fa-heart me-2"></i>Next of Kin Information</span>

</div>



<div class="row">

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

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

    </div>

</div>



<script>

function loadStaffNokFields(rowIndex) {

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

    

    let html = `

        <div class="row">

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

                <label class="form-label">Next of Kin Name</label>

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

            </div>

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

                <label class="form-label">Next of Kin Phone</label>

                <input type="tel" class="form-control" name="staff[${rowIndex}][next_of_kin_phone]" value="${getFieldValue(rowIndex, 'next_of_kin_phone')}">

            </div>

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

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

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

            </div>

        </div>

        

        <h6 class="bg-light p-2 mb-3 mt-3">Personal Details</h6>

        <div class="row">

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

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

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

            </div>

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

                <label class="form-label">Marital Status</label>

                <select class="form-select" name="staff[${rowIndex}][marital_status]">

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

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

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

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

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

                </select>

            </div>

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

                <label class="form-label">Languages Spoken</label>

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

            </div>

        </div>

        

        <div class="row">

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

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

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

            </div>

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

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

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

            </div>

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

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

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

            </div>

        </div>

    `;

    

    container.innerHTML = html;

}



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

    const nokTab = document.getElementById('staff-nextofkin-tab');

    if (nokTab) {

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

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

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

                loadStaffNokFields(index);

            });

        });

    }

});

</script>