<?php

/**

 * Staff Manual Entry Form

 */

?>

<div class="row-counter">

    <span><i class="fas fa-chalkboard-teacher me-2"></i>Entering Staff - <span id="row-count">1</span> record(s)</span>

    <button type="button" class="btn btn-sm btn-primary" onclick="addRow()">

        <i class="fas fa-plus me-2"></i>Add Another Staff

    </button>

</div>



<div id="rows-container">

    <!-- Row 1 -->

    <div class="data-row mb-4 p-3 border rounded">

        <div class="d-flex justify-content-between mb-3">

            <h6 class="text-primary">Staff #1</h6>

            <span class="remove-row" onclick="removeRow(this)" title="Remove this staff">

                <i class="fas fa-times-circle"></i>

            </span>

        </div>

        

        <!-- Basic Information -->

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

        <div class="row">

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

                <label class="form-label">Staff ID <span class="text-danger">*</span></label>

                <input type="text" class="form-control" name="staff[0][staff_id]" placeholder="e.g., STF001" required>

            </div>

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

                <label class="form-label">Full Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control" name="staff[0][full_name]" required>

            </div>

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

                <label class="form-label">Reg No.</label>

                <input type="text" class="form-control" name="staff[0][reg_no]" placeholder="Registration number">

            </div>

        </div>

        

        <div class="row">

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

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

                <select class="form-select" name="staff[0][sex]">

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

                    <option value="Male">Male</option>

                    <option value="Female">Female</option>

                    <option value="Other">Other</option>

                </select>

            </div>

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

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

                <input type="date" class="form-control" name="staff[0][date_of_birth]">

            </div>

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

                <label class="form-label">Place of Birth</label>

                <input type="text" class="form-control" name="staff[0][place_of_birth]">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][nationality]" value="Ghanaian">

            </div>

        </div>

        

        <!-- Contact Information -->

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

        <div class="row">

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

                <label class="form-label">Phone <span class="text-danger">*</span></label>

                <input type="tel" class="form-control" name="staff[0][phone]" placeholder="024XXXXXXX" required>

            </div>

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

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

                <input type="tel" class="form-control" name="staff[0][tel_no]" placeholder="024XXXXXXX">

            </div>

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

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

                <input type="email" class="form-control" name="staff[0][email]" placeholder="name@example.com">

            </div>

        </div>

        

        <div class="row">

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

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

                <textarea class="form-control" name="staff[0][residential_address]" rows="2"></textarea>

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][digital_address]" placeholder="e.g., GA-123-4567">

            </div>

        </div>

        

        <!-- Professional Information -->

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

        <div class="row">

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

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

                <input type="text" class="form-control" name="staff[0][academic_qualification]" placeholder="e.g., B.Ed Mathematics">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][professional_qualification]" placeholder="e.g., PGDE">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][year_of_certification]" placeholder="e.g., 2015">

            </div>

        </div>

        

        <div class="row">

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

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

                <select class="form-select" name="staff[0][class_taught]">

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

                    <option value="Nursery 1">Nursery 1</option>

                    <option value="Nursery 2">Nursery 2</option>

                    <option value="KG 1">KG 1</option>

                    <option value="KG 2">KG 2</option>

                    <option value="Class 1">Class 1</option>

                    <option value="Class 2">Class 2</option>

                    <option value="Class 3">Class 3</option>

                    <option value="Class 4">Class 4</option>

                    <option value="Class 5">Class 5</option>

                    <option value="Class 6">Class 6</option>

                    <option value="JHS 1">JHS 1</option>

                    <option value="JHS 2">JHS 2</option>

                    <option value="JHS 3">JHS 3</option>

                </select>

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][subject_to_teach]" placeholder="e.g., Mathematics, Science">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][present_rank]" placeholder="e.g., Senior Teacher">

            </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[0][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[0][date_promoted_to_present_rank]">

            </div>

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

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

                <input type="date" class="form-control" name="staff[0][date_of_employment]">

            </div>

        </div>

        

        <!-- Institutions & Experience -->

        <h6 class="bg-light p-2 mb-3 mt-3">Institutions & Experience</h6>

        <div class="row">

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

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

                <textarea class="form-control" name="staff[0][institutions_attended]" rows="2" placeholder="List 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[0][teaching_experience]" rows="2" placeholder="Describe 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[0][previous_schools]" rows="2" placeholder="List previous schools"></textarea>

            </div>

        </div>

        

        <!-- Bank Details -->

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

        <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[0][bank_name]" placeholder="e.g., GCB Bank">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][bank_account]" placeholder="Account number">

            </div>

        </div>

        

        <!-- SSNIT & TIN -->

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

        <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[0][ssnit_number]" placeholder="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[0][tin_number]" placeholder="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[0][salary]" placeholder="Monthly salary">

            </div>

        </div>

        

        <!-- Next of Kin -->

        <h6 class="bg-light p-2 mb-3 mt-3">Next of Kin</h6>

        <div class="row">

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

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

                <input type="text" class="form-control" name="staff[0][next_of_kin]" placeholder="Name">

            </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[0][next_of_kin_phone]" placeholder="024XXXXXXX">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][guardian_relationship]" placeholder="e.g., Spouse">

            </div>

        </div>

        

        <!-- Personal Details -->

        <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[0][religious_denomination]" placeholder="e.g., Christian">

            </div>

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

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

                <select class="form-select" name="staff[0][marital_status]">

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

                    <option value="Single">Single</option>

                    <option value="Married">Married</option>

                    <option value="Divorced">Divorced</option>

                    <option value="Widowed">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[0][languages_spoken]" placeholder="e.g., English, Twi">

            </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[0][district]" placeholder="e.g., Ga East">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][region]" placeholder="e.g., Greater Accra">

            </div>

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

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

                <input type="text" class="form-control" name="staff[0][hometown]" placeholder="e.g., Accra">

            </div>

        </div>

        

        <!-- Approval -->

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

        <div class="row">

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

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

                <input type="text" class="form-control" name="staff[0][approved_by]" placeholder="Name of approver">

            </div>

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

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

                <input type="date" class="form-control" name="staff[0][expected_retirement_date]">

            </div>

        </div>

    </div>

</div>



<script>

let rowCount = 1;



function addRow() {

    const container = document.getElementById('rows-container');

    const template = container.children[0].cloneNode(true);

    

    // Update indices

    rowCount++;

    template.querySelectorAll('[name^="staff"]').forEach(input => {

        const name = input.getAttribute('name');

        input.setAttribute('name', name.replace(/\[\d+\]/, `[${rowCount-1}]`));

        if (input.type !== 'select-one') {

            input.value = '';

        } else {

            input.selectedIndex = 0;

        }

    });

    

    // Update header

    template.querySelector('h6.text-primary').textContent = `Staff #${rowCount}`;

    

    container.appendChild(template);

    document.getElementById('row-count').textContent = rowCount;

}



function removeRow(btn) {

    if (rowCount > 1) {

        btn.closest('.data-row').remove();

        rowCount--;

        document.getElementById('row-count').textContent = rowCount;

        

        // Renumber remaining rows

        document.querySelectorAll('.data-row').forEach((row, index) => {

            row.querySelector('h6.text-primary').textContent = `Staff #${index + 1}`;

            row.querySelectorAll('[name^="staff"]').forEach(input => {

                const name = input.getAttribute('name');

                input.setAttribute('name', name.replace(/\[\d+\]/, `[${index}]`));

            });

        });

    }

}

</script>