<script>

let staffDB = JSON.parse(localStorage.getItem('aflinkStaff')) || [];

let payrollLog = JSON.parse(localStorage.getItem('aflinkPayroll')) || [];

const staffForm = document.getElementById('staffForm');

const payrollForm = document.getElementById('payrollForm');

const staffTableBody = document.querySelector('#staffTable tbody');

const selectStaff = document.getElementById('selectStaff');

const payslipDiv = document.getElementById('payslip');

const payrollSummaryBody = document.querySelector('#payrollSummary tbody');

function renderStaff() {

staffTableBody.innerHTML = '';

selectStaff.innerHTML = '<option value="">-- Select --</option>';

staffDB.forEach(s => {

const row = document.createElement('tr');

row.innerHTML = `<td>${s.id}</td><td>${s.name}</td><td>${s.position}</td>`;

staffTableBody.appendChild(row);

const opt = document.createElement('option');

opt.value = s.id;

opt.text = `${s.name} (${s.id})`;

selectStaff.appendChild(opt);

});

localStorage.setItem('aflinkStaff', JSON.stringify(staffDB));

function renderPayrollSummary() {

payrollSummaryBody.innerHTML = '';

payrollLog.forEach(entry => {
 const row = document.createElement('tr');

row.innerHTML = `<td>${entry.id}</td><td>${entry.name}</td><td>${entry.position}</td><td>$
{entry.netPay.toLocaleString()}</td><td>${entry.date}</td>`;

payrollSummaryBody.appendChild(row);

});

staffForm.addEventListener('submit', e => {

e.preventDefault();

const id = document.getElementById('staffId').value.trim();

const name = document.getElementById('staffName').value.trim();

const position = document.getElementById('staffPosition').value.trim();

if(id && name) {

staffDB.push({ id, name, position });

renderStaff();

staffForm.reset();

});

payrollForm.addEventListener('submit', e => {

e.preventDefault();

const staffId = selectStaff.value;

const staff = staffDB.find(s => s.id === staffId);

if(!staff) return alert('Please select a staff member');

const basic = parseFloat(document.getElementById('basicSalary').value) || 0;

const allowances = parseFloat(document.getElementById('allowances').value) || 0;

const loan = parseFloat(document.getElementById('loanDeduction').value) || 0;

const gross = basic + allowances;

if (gross > 60000 && gross <= 100000) {

paye = 0.20 * (gross - 60000);

} else if (gross > 100000) {

paye = (0.20 * 40000) + (0.30 * (gross - 100000));

const rssb = 0.06 * gross;

const netBeforeExtras = gross - paye - rssb - loan;

const maternity = 0.003 * netBeforeExtras;

const cbhi = 0.005 * netBeforeExtras;

const netPay = netBeforeExtras - maternity - cbhi;

const today = new Date().toLocaleDateString();

// Render Pay Slip

payslipDiv.style.display = 'block';

payslipDiv.innerHTML = `

<h3>e-Pay Slip</h3>

<p><strong>Staff:</strong> ${staff.name} (${staff.id})</p>

<p><strong>Position:</strong> ${staff.position}</p>

<p><strong>Basic Salary:</strong> RWF ${basic.toLocaleString()}</p>

<p><strong>Allowances:</strong> RWF ${allowances.toLocaleString()}</p>

<p><strong>Gross Pay:</strong> RWF ${gross.toLocaleString()}</p>

<p><strong>PAYE Deduction:</strong> RWF ${paye.toLocaleString()}</p>

<p><strong>RSSB Deduction (6%):</strong> RWF ${rssb.toLocaleString()}</p>

<p><strong>Maternity Deduction (0.3%):</strong> RWF ${maternity.toLocaleString()}</p>

<p><strong>CBHI Deduction (0.5%):</strong> RWF ${cbhi.toLocaleString()}</p>

<p><strong>Loan Deduction:</strong> RWF ${loan.toLocaleString()}</p>

<h4>Net Pay: RWF ${netPay.toLocaleString()}</h4>

<p><em>Date:</em> ${today}</p>

<button onclick="window.print()">Print Pay Slip</button>

`;

// Save Payroll Summary

payrollLog.push({

id: staff.id,

name: staff.name,

position: staff.position,

netPay: netPay,

date: today

});

localStorage.setItem('aflinkPayroll', JSON.stringify(payrollLog));

renderPayrollSummary();

});

renderStaff();

renderPayrollSummary();

</script>