<?php

/**

 * Staff Professional Information Form

 */

?>

<div id="professional-container">

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

</div>



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

    <span><i class="fas fa-graduation-cap me-2"></i>Professional Information</span>

</div>



<div class="row">

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

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

    </div>

</div>



<script>

function loadProfessionalFields(rowIndex) {

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

    

    let html = `

        <div class="row">

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

                <label class="form-label">Academic Qualification</label>

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

            </div>

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

                <label class="form-label">Professional Qualification</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Class Taught</label>

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

            </div>

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

                <label class="form-label">Subjects to Teach</label>

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

            </div>

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

                <label class="form-label">Present Rank</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Date of First Appointment</label>

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

            </div>

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

                <label class="form-label">Date Promoted to Present Rank</label>

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

            </div>

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

                <label class="form-label">Year of Certification</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Institutions Attended</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Teaching Experience</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Previous Schools</label>

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

            </div>

        </div>

    `;

    

    container.innerHTML = html;

}



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

    const profTab = document.getElementById('staff-professional-tab');

    if (profTab) {

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

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

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

                loadProfessionalFields(index);

            });

        });

    }

});

</script>