{% extends "payroll/base.html" %}
{% block content %}
<style>
.employee-page{padding:1.2rem 1.2rem 2rem}.employee-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.employee-toolbar h1{font-size:2.4rem;margin:0}.employee-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.employee-table-wrap{overflow-x:auto}.employee-table{width:100%;border-collapse:collapse}.employee-table th{background:#505b63;color:#fff;padding:.65rem .5rem;white-space:nowrap}
.employee-table td{padding:.55rem .5rem;border-bottom:1px solid #dce0e3}.employee-table tbody tr:nth-child(odd){background:#f1f1f1}.employee-table tbody tr:nth-child(even){background:#fff}
.employee-table .action-cell{white-space:nowrap}.employee-modal .modal-dialog{max-width:1120px}.employee-modal .modal-body{max-height:72vh;overflow-y:auto}
.employee-modal .section-title{font-size:.9rem;font-weight:700;color:#34495e;border-bottom:1px solid #ced4da;padding-bottom:.45rem;margin:1.2rem 0 .8rem}
.employee-modal .section-title:first-child{margin-top:0}.employee-modal label{font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.employee-modal .form-control,.employee-modal .form-select{border-radius:0}.employee-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.9rem 0}
</style>
<div class="employee-page">
 <div class="employee-toolbar"><h1>Employees</h1><div class="employee-actions">
  <form method="get" class="d-flex gap-2"><input class="form-control" type="search" name="q" value="{{ q }}" placeholder="Search employee no, name, department..." style="min-width:290px"><button class="btn btn-secondary" type="submit">Search</button></form>
  <button class="btn btn-secondary" type="button" onclick="openEmployeeModal()">Add Employee</button>
 </div></div>
 {% if messages %}{% for message in messages %}<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">{{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>{% endfor %}{% endif %}
 <div class="employee-table-wrap"><table class="employee-table"><thead><tr><th>No</th><th>Employee No</th><th>Employee Name</th><th>Department</th><th>Position</th><th>Actions</th></tr></thead><tbody>
 {% for emp in page_obj %}<tr><td>{{ page_obj.start_index|add:forloop.counter0 }}</td><td>{{ emp.empno }}</td><td>{{ emp.empname|default_if_none:"" }}</td><td>{{ emp.dept_name|default_if_none:"" }}</td><td>{{ emp.position_name|default_if_none:emp.position|default_if_none:"" }}</td><td class="action-cell">
 <button class="btn btn-sm btn-secondary" type="button" onclick="editEmployee({{ emp.id }})" title="Edit"><i class="bi bi-pencil-square"></i></button>
 <form method="post" action="{% url 'payroll:payroll_employee_delete' emp.id %}" class="d-inline" onsubmit="return confirm('Delete employee {{ emp.empno|escapejs }}?')">{% csrf_token %}<input type="hidden" name="empno" value="{{ emp.empno }}"><button class="btn btn-sm btn-danger" type="submit" title="Delete"><i class="bi bi-trash"></i></button></form>
 </td></tr>{% empty %}<tr><td colspan="6" class="text-center py-4">No employee data found.</td></tr>{% endfor %}
 </tbody></table></div>
 <div class="employee-pagination"><span>Showing {{ page_obj.start_index|default:0 }}–{{ page_obj.end_index|default:0 }} of {{ total_records }}</span><nav><ul class="pagination pagination-sm mb-0">
 {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page=1">First</a></li><li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.previous_page_number }}">Prev</a></li>{% else %}<li class="page-item disabled"><span class="page-link">First</span></li><li class="page-item disabled"><span class="page-link">Prev</span></li>{% endif %}
 <li class="page-item active"><span class="page-link">{{ page_obj.number|default:1 }}</span></li>
 {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.next_page_number }}">Next</a></li><li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.paginator.num_pages }}">Last</a></li>{% else %}<li class="page-item disabled"><span class="page-link">Next</span></li><li class="page-item disabled"><span class="page-link">Last</span></li>{% endif %}
 </ul></nav></div>
</div>
<div class="modal fade employee-modal" id="employeeModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-xl modal-dialog-scrollable"><div class="modal-content">
 <form method="post" action="{% url 'payroll:payroll_employee' %}" id="employeeForm">{% csrf_token %}<input type="hidden" name="record_id" id="record_id"><input type="hidden" name="original_empno" id="original_empno">
 <div class="modal-header"><div><h5 class="modal-title" id="employeeModalTitle">Add Employee</h5><div class="text-muted small">Employee Master Data</div></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">
<div class="section-title">IDENTITAS KARYAWAN</div><div class="row g-3">
<div class="col-md-6"><label for="emp_empno">Employee No *</label><input class="form-control" type="text" id="emp_empno" name="empno" required maxlength=50 required></div>
<div class="col-md-6"><label for="emp_empname">Employee Name</label><input class="form-control" type="text" id="emp_empname" name="empname" maxlength=255></div>
<div class="col-md-6"><label for="emp_cc_no">Cost Center</label><input class="form-control" type="text" id="emp_cc_no" name="cc_no" ></div>
<div class="col-md-6"><label for="emp_dept_name">Department</label><input class="form-control" type="text" id="emp_dept_name" name="dept_name" ></div>
<div class="col-md-6"><label for="emp_department_code">Department Code</label><input class="form-control" type="text" id="emp_department_code" name="department_code" maxlength=10></div>
<div class="col-md-6"><label for="emp_position">Position</label><input class="form-control" type="text" id="emp_position" name="position" ></div>
<div class="col-md-6"><label for="emp_position_code">Position Code</label><input class="form-control" type="text" id="emp_position_code" name="position_code" maxlength=10></div>
<div class="col-md-6"><label for="emp_position_name">Position Name</label><input class="form-control" type="text" id="emp_position_name" name="position_name" maxlength=50></div>
<div class="col-md-6"><label for="emp_employee_rank">Employee Rank</label><input class="form-control" type="text" id="emp_employee_rank" name="employee_rank" maxlength=10></div>
<div class="col-md-6"><label for="emp_level">Level</label><input class="form-control" type="text" id="emp_level" name="level" maxlength=1></div>
<div class="col-md-6"><label for="emp_jenis_pegawai">Employee Type</label><input class="form-control" type="text" id="emp_jenis_pegawai" name="jenis_pegawai" maxlength=15></div>
<div class="col-md-6"><label for="emp_entry_status">Entry Status</label><input class="form-control" type="text" id="emp_entry_status" name="entry_status" maxlength=24></div>
<div class="col-md-6"><label for="emp_quit_status">Quit Status</label><input class="form-control" type="text" id="emp_quit_status" name="quit_status" maxlength=24></div>
</div>
<div class="section-title">DATA PRIBADI</div><div class="row g-3">
<div class="col-12"><label for="emp_address">Address</label><input class="form-control" type="text" id="emp_address" name="address" maxlength=120></div>
<div class="col-md-6"><label for="emp_phone">Phone</label><input class="form-control" type="text" id="emp_phone" name="phone" maxlength=15></div>
<div class="col-md-6"><label for="emp_religion">Religion</label><input class="form-control" type="text" id="emp_religion" name="religion" maxlength=9></div>
<div class="col-md-6"><label for="emp_citizen">Citizenship</label><input class="form-control" type="text" id="emp_citizen" name="citizen" maxlength=10></div>
<div class="col-md-6"><label for="emp_place_of_birth">Place of Birth</label><input class="form-control" type="text" id="emp_place_of_birth" name="place_of_birth" maxlength=50></div>
<div class="col-md-6"><label for="emp_date_of_birth">Date of Birth</label><input class="form-control" type="date" id="emp_date_of_birth" name="date_of_birth" ></div>
<div class="col-md-6"><label for="emp_sex">Sex</label><select class="form-select" id="emp_sex" name="sex"><option value="">-- Select --</option><option value="Male">Male</option><option value="Female">Female</option></select></div>
<div class="col-md-6"><label for="emp_marital">Marital Status</label><select class="form-select" id="emp_marital" name="marital"><option value="">-- Select --</option><option value="S">S</option><option value="M">M</option><option value="D">D</option></select></div>
<div class="col-md-6"><label for="emp_jumlah_tanggungan">Dependents</label><input class="form-control" type="number" id="emp_jumlah_tanggungan" name="jumlah_tanggungan" step=1></div>
<div class="col-md-6"><label for="emp_npwp">NPWP</label><input class="form-control" type="text" id="emp_npwp" name="npwp" maxlength=20></div>
</div>
<div class="section-title">BANK & JAMINAN SOSIAL</div><div class="row g-3">
<div class="col-md-6"><label for="emp_bank_code">Bank Code</label><input class="form-control" type="text" id="emp_bank_code" name="bank_code" maxlength=5></div>
<div class="col-md-6"><label for="emp_account_no">Bank Account No.</label><input class="form-control" type="text" id="emp_account_no" name="account_no" maxlength=12></div>
<div class="col-md-6"><label for="emp_currency">Currency</label><input class="form-control" type="text" id="emp_currency" name="currency" maxlength=3></div>
<div class="col-md-6"><label for="emp_bpjs_kesehatan_no">BPJS Kesehatan No.</label><input class="form-control" type="text" id="emp_bpjs_kesehatan_no" name="bpjs_kesehatan_no" maxlength=25></div>
<div class="col-md-6"><label for="emp_astek">Astek</label><input class="form-control" type="number" id="emp_astek" name="astek" step=1></div>
<div class="col-md-6"><label for="emp_bpjs_ketenagakerjaan_no">BPJS Ketenagakerjaan No.</label><input class="form-control" type="text" id="emp_bpjs_ketenagakerjaan_no" name="bpjs_ketenagakerjaan_no" maxlength=25></div>
<div class="col-md-6"><label for="emp_bpjs_no">BPJS No.</label><input class="form-control" type="number" id="emp_bpjs_no" name="bpjs_no" step=1></div>
<div class="col-md-6"><label for="emp_bpjsip">BPJS IP</label><input class="form-control" type="number" id="emp_bpjsip" name="bpjsip" step=1></div>
<div class="col-md-6"><label for="emp_bpjstggo">BPJS Tanggungan</label><input class="form-control" type="number" id="emp_bpjstggo" name="bpjstggo" step=0.01></div>
</div>
<div class="section-title">STATUS KERJA & PERIODE</div><div class="row g-3">
<div class="col-md-6"><label for="emp_employment_start">Employment Start</label><input class="form-control" type="date" id="emp_employment_start" name="employment_start" ></div>
<div class="col-md-6"><label for="emp_employment_end">Employment End</label><input class="form-control" type="date" id="emp_employment_end" name="employment_end" ></div>
<div class="col-md-6"><label for="emp_start_working">Start Working</label><input class="form-control" type="date" id="emp_start_working" name="start_working" ></div>
<div class="col-md-6"><label for="emp_end_working">End Working</label><input class="form-control" type="date" id="emp_end_working" name="end_working" ></div>
<div class="col-md-6"><label for="emp_income_period_start">Income Period Start</label><input class="form-control" type="text" id="emp_income_period_start" name="income_period_start" maxlength=20></div>
<div class="col-md-6"><label for="emp_income_period_end">Income Period End</label><input class="form-control" type="text" id="emp_income_period_end" name="income_period_end" maxlength=20></div>
<div class="col-md-6"><label for="emp_metode">Tax Method</label><input class="form-control" type="text" id="emp_metode" name="metode" maxlength=8></div>
<div class="col-md-6"><label for="emp_branch">Branch</label><input class="form-control" type="text" id="emp_branch" name="branch" maxlength=10></div>
</div>
<div class="section-title">KOMPONEN PENGHASILAN</div><div class="row g-3">
<div class="col-md-6"><label for="emp_basic_salary">Basic Salary</label><input class="form-control" type="number" id="emp_basic_salary" name="basic_salary" step=0.01></div>
<div class="col-md-6"><label for="emp_overtime">Overtime</label><input class="form-control" type="number" id="emp_overtime" name="overtime" step=0.01></div>
<div class="col-md-6"><label for="emp_medical">Medical</label><input class="form-control" type="number" id="emp_medical" name="medical" step=0.01></div>
<div class="col-md-6"><label for="emp_meal">Meal</label><input class="form-control" type="number" id="emp_meal" name="meal" step=0.01></div>
<div class="col-md-6"><label for="emp_transport">Transport</label><input class="form-control" type="number" id="emp_transport" name="transport" step=0.01></div>
<div class="col-md-6"><label for="emp_position_allowance">Position Allowance</label><input class="form-control" type="number" id="emp_position_allowance" name="position_allowance" step=0.01></div>
<div class="col-md-6"><label for="emp_other_allowance">Other Allowance</label><input class="form-control" type="number" id="emp_other_allowance" name="other_allowance" step=0.01></div>
<div class="col-md-6"><label for="emp_honorarium">Honorarium</label><input class="form-control" type="number" id="emp_honorarium" name="honorarium" step=0.01></div>
<div class="col-md-6"><label for="emp_premi">Premium</label><input class="form-control" type="number" id="emp_premi" name="premi" step=0.01></div>
<div class="col-md-6"><label for="emp_natura">Benefits in Kind</label><input class="form-control" type="number" id="emp_natura" name="natura" step=0.01></div>
<div class="col-md-6"><label for="emp_bonus">Bonus</label><input class="form-control" type="number" id="emp_bonus" name="bonus" step=0.01></div>
<div class="col-md-6"><label for="emp_pension">Pension</label><input class="form-control" type="number" id="emp_pension" name="pension" step=0.01></div>
<div class="col-md-6"><label for="emp_daily_salary">Daily Salary</label><input class="form-control" type="number" id="emp_daily_salary" name="daily_salary" step=0.01></div>
<div class="col-md-6"><label for="emp_loan">Loan</label><input class="form-control" type="number" id="emp_loan" name="loan" step=0.01></div>
<div class="col-md-6"><label for="emp_working_days">Working Days</label><input class="form-control" type="number" id="emp_working_days" name="working_days" step=0.01></div>
<div class="col-md-6"><label for="emp_overtime_hours">Overtime Hours</label><input class="form-control" type="number" id="emp_overtime_hours" name="overtime_hours" step=0.01></div>
<div class="col-md-6"><label for="emp_cash">Cash</label><input class="form-control" type="number" id="emp_cash" name="cash" step=1></div>
<div class="col-md-6"><label for="emp_transfer">Transfer</label><input class="form-control" type="number" id="emp_transfer" name="transfer" step=1></div>
</div>
<div class="section-title">PAJAK, CUTI & KONTAK DARURAT</div><div class="row g-3">
<div class="col-md-6"><label for="emp_ptkp_type">PTKP Type</label><input class="form-control" type="text" id="emp_ptkp_type" name="ptkp_type" maxlength=8></div>
<div class="col-md-6"><label for="emp_thtakwim">Tahun Takwim</label><input class="form-control" type="text" id="emp_thtakwim" name="thtakwim" maxlength=4></div>
<div class="col-md-6"><label for="emp_annual_leave">Annual Leave</label><input class="form-control" type="number" id="emp_annual_leave" name="annual_leave" step=0.01></div>
<div class="col-md-6"><label for="emp_cuti_jabatan">Department Leave</label><input class="form-control" type="number" id="emp_cuti_jabatan" name="cuti_jabatan" step=0.01></div>
<div class="col-md-6"><label for="emp_leave_max">Maximum Leave</label><input class="form-control" type="number" id="emp_leave_max" name="leave_max" step=0.01></div>
<div class="col-md-6"><label for="emp_emergency_no">Emergency Contact Name</label><input class="form-control" type="text" id="emp_emergency_no" name="emergency_no" maxlength=35></div>
<div class="col-12"><label for="emp_emergency_address">Emergency Address</label><input class="form-control" type="text" id="emp_emergency_address" name="emergency_address" maxlength=85></div>
<div class="col-md-6"><label for="emp_emergency_phone">Emergency Phone</label><input class="form-control" type="text" id="emp_emergency_phone" name="emergency_phone" maxlength=25></div>
<div class="col-md-6"><label for="emp_emergency_hp">Emergency Mobile</label><input class="form-control" type="text" id="emp_emergency_hp" name="emergency_hp" maxlength=25></div>
<div class="col-md-6"><label for="emp_photo">Photo</label><input class="form-control" type="text" id="emp_photo" name="photo" maxlength=255></div>
<div class="col-md-6"><label for="emp_photo_file">Photo File</label><input class="form-control" type="text" id="emp_photo_file" name="photo_file" maxlength=255></div>
</div>
 </div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Save Employee</button></div></form>
</div></div></div>
<script>
const employeeModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('employeeModal'));
const employeeForm = document.getElementById('employeeForm');
function openEmployeeModal(){employeeForm.reset();document.getElementById('record_id').value='';document.getElementById('original_empno').value='';document.getElementById('employeeModalTitle').textContent='Add Employee';employeeModal.show();}
function editEmployee(id){
 fetch("{% url 'payroll:payroll_employee' %}?record_id="+encodeURIComponent(id)+"&format=json")
 .then(r=>r.json()).then(data=>{
  if(data.error) throw new Error(data.error);
  employeeForm.reset();document.getElementById('record_id').value=data.id;document.getElementById('original_empno').value=data.empno;
  Object.keys(data).forEach(name=>{const el=employeeForm.elements.namedItem(name);if(el){if(data[name]==null){el.value='';}else if(el.type==='date'){el.value=String(data[name]).slice(0,10);}else{el.value=data[name];}}});
  document.getElementById('employeeModalTitle').textContent='Edit Employee — '+data.empno;employeeModal.show();
 }).catch(()=>alert('Unable to load employee details.'));
}
</script>
{% endblock %}