<?php

/**

 * Staff Bank & SSNIT Information Form

 */

?>

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

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

</div>



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

    <span><i class="fas fa-university me-2"></i>Bank & SSNIT Information</span>

</div>



<div class="row">

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

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

    </div>

</div>



<script>

function loadStaffBankFields(rowIndex) {

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

    

    let html = `

        <div class="row">

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

                <label class="form-label">Bank Name</label>

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

            </div>

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

                <label class="form-label">Bank Account Number</label>

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

            </div>

        </div>

        

        <div class="row">

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

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

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

            </div>

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

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

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

            </div>

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

                <label class="form-label">Salary (₵)</label>

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

            </div>

        </div>

        

        <div class="row">

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

                <label class="form-label">Date of Employment</label>

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

            </div>

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

                <label class="form-label">Expected Retirement Date</label>

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

            </div>

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

                <label class="form-label">Approved By</label>

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

            </div>

        </div>

    `;

    

    container.innerHTML = html;

}



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

    const bankTab = document.getElementById('staff-bank-tab');

    if (bankTab) {

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

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

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

                loadStaffBankFields(index);

            });

        });

    }

});

</script>