@extends('layouts.app')
@section('title','Employees')
@section('page-title','Employee Directory')
@section('breadcrumb','SpaceHR/ Employees')
@section('content')
@php($hierarchyLevels = \App\Models\Setting::hierarchyLevels())
@push('styles')
<style>
.hierarchy-modal{max-width:860px}
.hierarchy-assignment-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:18px;align-items:start}
.hierarchy-help{
  display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(139,92,246,.06));
  border:1px solid rgba(0,212,255,.18);border-radius:10px;padding:12px 14px;margin-bottom:16px;color:var(--text-secondary);font-size:12px;line-height:1.5
}
.hierarchy-help i{color:var(--accent-cyan);margin-top:2px}
.hierarchy-form-card,.hierarchy-preview-card{background:var(--bg-hover);border:1px solid var(--border);border-radius:10px;padding:14px}
.hierarchy-preview-card{min-height:100%}
.hierarchy-preview-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hierarchy-person{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:var(--bg-card);
  border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px
}
.hierarchy-person.active{border-color:rgba(0,212,255,.45);box-shadow:0 0 0 1px rgba(0,212,255,.12)}
.hierarchy-avatar{
  width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet));
  display:grid;place-items:center;color:#fff;font-family:'Syne',sans-serif;font-size:12px;font-weight:800
}
.hierarchy-name{font-size:13px;font-weight:800;color:var(--text-primary)}
.hierarchy-role{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.35}
.hierarchy-badge{display:inline-flex;border-radius:999px;background:rgba(0,212,255,.1);color:var(--accent-cyan);padding:3px 8px;font-size:10px;font-weight:800;margin-top:7px}
.hierarchy-arrow{display:grid;place-items:center;color:var(--accent-teal);height:20px;margin-bottom:10px}
.hierarchy-empty{border:1px dashed var(--border);border-radius:8px;padding:18px;text-align:center;color:var(--text-muted);font-size:12px}
@media(max-width:900px){.hierarchy-assignment-grid{grid-template-columns:1fr}.hierarchy-modal{max-width:94vw}}
</style>
@endpush
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title">
      <h1>Employee Directory</h1>
      <p>Manage all employee records, profiles and salary information</p>
    </div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="openHierarchyModal()"><i class="fas fa-sitemap"></i> Assign Hierarchy</button>
      <a href="/employees/export/csv" class="btn btn-secondary"><i class="fas fa-download"></i> Export CSV</a>
      <button class="btn btn-primary" onclick="openModal('modal-add-emp')"><i class="fas fa-plus"></i> Add Employee</button>
    </div>
  </div>

  <div class="stat-grid" style="grid-template-columns:repeat(5,1fr)">
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-users"></i></div><div class="stat-num" id="s-total">—</div><div class="stat-label">Total Employees</div></div>
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-user-check"></i></div><div class="stat-num" id="s-active">—</div><div class="stat-label">Active</div></div>
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-user-clock"></i></div><div class="stat-num" id="s-leave">—</div><div class="stat-label">On Leave</div></div>
    <div class="stat-card rose animate-entry"><div class="stat-icon"><i class="fas fa-user-times"></i></div><div class="stat-num" id="s-inactive">—</div><div class="stat-label">Inactive</div></div>
    <div class="stat-card violet animate-entry"><div class="stat-icon"><i class="fas fa-building"></i></div><div class="stat-num" id="s-depts">—</div><div class="stat-label">Departments</div></div>
  </div>

  <div class="panel animate-entry">
    <div class="panel-header">
      <span class="panel-title"><i class="fas fa-table" style="color:var(--accent-cyan);margin-right:8px"></i>All Employees</span>
      <div class="filter-bar" style="margin-bottom:0">
        <div class="search-bar" style="width:220px"><i class="fas fa-search"></i><input type="text" id="emp-search" placeholder="Search name, ID, email…"></div>
        <select class="form-control" id="dept-filter" style="width:160px"><option value="">All Departments</option></select>
        <select class="form-control" id="status-filter" style="width:130px">
          <option value="">All Status</option><option value="active">Active</option>
          <option value="on_leave">On Leave</option><option value="inactive">Inactive</option><option value="terminated">Terminated</option>
        </select>
        <select class="form-control" id="grade-filter" style="width:130px">
          <option value="">All Levels</option>
          @foreach($hierarchyLevels as $level)
            <option value="{{ $level['key'] }}">{{ $level['key'] }} - {{ $level['label'] }}</option>
          @endforeach
          {{--
          <option value="">All Grades</option><option value="L1">L1 – Junior</option><option value="L2">L2 – Mid</option>
          <option value="L3">L3 – Senior</option><option value="L4">L4 – Lead</option><option value="L5">L5 – Director</option>
          --}}
        </select>
      </div>
    </div>
    <div id="emp-loading" style="text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin fa-2x"></i><br><br>Loading employees…</div>
    <div id="emp-table-wrap" style="display:none">
      <table class="data-table">
        <thead><tr><th>Employee</th><th>ID</th><th>Department</th><th>Position</th><th>Level</th><th>Supervisor</th><th>Join Date</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="emp-tbody"></tbody>
      </table>
    </div>
    <div id="emp-pagination" class="pagination-wrap" style="padding:14px 20px;border-top:1px solid var(--border)"></div>
  </div>
</div>

{{-- Hierarchy Assignment Modal --}}
<div class="modal-overlay" id="modal-hierarchy">
  <div class="modal hierarchy-modal">
    <div class="modal-header">
      <span class="modal-title"><i class="fas fa-sitemap" style="color:var(--accent-teal);margin-right:8px"></i>Assign Reporting Hierarchy</span>
      <button class="modal-close" onclick="closeModal('modal-hierarchy')"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <div class="hierarchy-help">
        <i class="fas fa-circle-info"></i>
        <div>Select an employee, set their organization level, and assign who they report to. The employee portal will immediately show the updated reporting line and team hierarchy.</div>
      </div>
      <div class="hierarchy-assignment-grid">
        <div class="hierarchy-form-card">
          <div class="form-grid">
            <div class="form-group full">
              <label class="form-label">Employee *</label>
              <select class="form-control" id="hf-employee" onchange="syncHierarchyFormFromEmployee()"><option value="">Select employee...</option></select>
            </div>
            <div class="form-group">
              <label class="form-label">Level *</label>
              <select class="form-control" id="hf-grade" onchange="updateHierarchyPreview()"></select>
            </div>
            <div class="form-group">
              <label class="form-label">Reports To</label>
              <select class="form-control" id="hf-manager" onchange="updateHierarchyPreview()"><option value="">Top level / no boss</option></select>
            </div>
          </div>
        </div>
        <div class="hierarchy-preview-card">
          <div class="hierarchy-preview-title"><i class="fas fa-diagram-project" style="color:var(--accent-cyan)"></i>Live Reporting Preview</div>
          <div id="hierarchy-preview">
            <div class="hierarchy-empty">Choose an employee to preview reporting line.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-hierarchy')">Cancel</button>
      <button class="btn btn-primary" id="btn-save-hierarchy" onclick="saveHierarchyAssignment()"><i class="fas fa-save"></i> Save Assignment</button>
    </div>
  </div>
</div>

{{-- Add Employee Modal --}}
<div class="modal-overlay" id="modal-add-emp">
  <div class="modal" style="max-width:620px">
    <div class="modal-header">
      <span class="modal-title"><i class="fas fa-user-plus" style="color:var(--accent-cyan);margin-right:8px"></i>Add New Employee</span>
      <button class="modal-close" onclick="closeModal('modal-add-emp')"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--text-secondary)">
        <i class="fas fa-info-circle" style="color:var(--accent-cyan)"></i> Fields marked <strong style="color:var(--accent-rose)">*</strong> are required. Salary structure and leave balances will be auto-created.
      </div>
      <div class="form-grid">
        <div class="form-group"><label class="form-label">First Name <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-fname" placeholder="John"><span class="form-error" id="err-fname"></span></div>
        <div class="form-group"><label class="form-label">Last Name <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-lname" placeholder="Doe"><span class="form-error" id="err-lname"></span></div>
        <div class="form-group"><label class="form-label">Email <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-email" type="email" placeholder="john@company.com"><span class="form-error" id="err-email"></span></div>
        <div class="form-group"><label class="form-label">Phone</label><input class="form-control" id="ef-phone" placeholder="+880 1xxx-xxxxxx"></div>
        <div class="form-group"><label class="form-label">Department <span style="color:var(--accent-rose)">*</span></label><select class="form-control" id="ef-dept"><option value="">Select…</option></select><span class="form-error" id="err-dept"></span></div>
        <div class="form-group"><label class="form-label">Position <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-pos" placeholder="Software Engineer"><span class="form-error" id="err-pos"></span></div>
        <div class="form-group"><label class="form-label">Grade <span style="color:var(--accent-rose)">*</span></label>
          <select class="form-control" id="ef-grade"><option value="L1">L1 — Junior</option><option value="L2" selected>L2 — Mid-level</option><option value="L3">L3 — Senior</option><option value="L4">L4 — Lead</option><option value="L5">L5 — Director</option></select></div>
        <div class="form-group"><label class="form-label">Supervisor</label><select class="form-control" id="ef-manager"><option value="">Top level / no supervisor</option></select></div>
        <div class="form-group"><label class="form-label">Employment Type</label>
          <select class="form-control" id="ef-type"><option value="full-time">Full-time</option><option value="part-time">Part-time</option><option value="contract">Contract</option><option value="intern">Intern</option></select></div>
        <div class="form-group"><label class="form-label">Join Date <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-join" type="date" value="{{ now()->format('Y-m-d') }}"></div>
        <div class="form-group"><label class="form-label">Basic Salary ($) <span style="color:var(--accent-rose)">*</span></label><input class="form-control" id="ef-salary" type="number" placeholder="5000" min="0"><span class="form-error" id="err-salary"></span></div>
        <div class="form-group"><label class="form-label">Transport Allow. ($)</label><input class="form-control" id="ef-trans" type="number" placeholder="400" min="0"></div>
        <div class="form-group"><label class="form-label">Medical Allow. ($)</label><input class="form-control" id="ef-med" type="number" placeholder="300" min="0"></div>
        <div class="form-group"><label class="form-label">Bank Name</label><input class="form-control" id="ef-bank" placeholder="BRAC Bank"></div>
        <div class="form-group"><label class="form-label">Bank Account</label><input class="form-control" id="ef-acc" placeholder="1234567890"></div>
        <div class="form-group"><label class="form-label">Date of Birth</label><input class="form-control" id="ef-dob" type="date"></div>
        <div class="form-group"><label class="form-label">Gender</label><select class="form-control" id="ef-gender"><option value="">Select…</option><option value="male">Male</option><option value="female">Female</option><option value="other">Other</option></select></div>
        <div class="form-group full"><label class="form-label">Address</label><input class="form-control" id="ef-address" placeholder="Street, City, Country"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-add-emp')">Cancel</button>
      <button class="btn btn-primary" id="btn-save-emp" onclick="submitAddEmployee()"><i class="fas fa-check"></i> Add Employee</button>
    </div>
  </div>
</div>

{{-- Edit Employee Modal --}}
<div class="modal-overlay" id="modal-edit-emp">
  <div class="modal" style="max-width:580px">
    <div class="modal-header">
      <span class="modal-title"><i class="fas fa-user-edit" style="color:var(--accent-amber);margin-right:8px"></i>Edit Employee</span>
      <button class="modal-close" onclick="closeModal('modal-edit-emp')"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="edit-id">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">First Name *</label><input class="form-control" id="ed-fname"></div>
        <div class="form-group"><label class="form-label">Last Name *</label><input class="form-control" id="ed-lname"></div>
        <div class="form-group"><label class="form-label">Email *</label><input class="form-control" id="ed-email" type="email"></div>
        <div class="form-group"><label class="form-label">Phone</label><input class="form-control" id="ed-phone"></div>
        <div class="form-group"><label class="form-label">Department *</label><select class="form-control" id="ed-dept"></select></div>
        <div class="form-group"><label class="form-label">Position *</label><input class="form-control" id="ed-pos"></div>
        <div class="form-group"><label class="form-label">Grade *</label>
          <select class="form-control" id="ed-grade"><option value="L1">L1 — Junior</option><option value="L2">L2 — Mid-level</option><option value="L3">L3 — Senior</option><option value="L4">L4 — Lead</option><option value="L5">L5 — Director</option></select></div>
        <div class="form-group"><label class="form-label">Supervisor</label><select class="form-control" id="ed-manager"><option value="">Top level / no supervisor</option></select></div>
        <div class="form-group"><label class="form-label">Type *</label>
          <select class="form-control" id="ed-type"><option value="full-time">Full-time</option><option value="part-time">Part-time</option><option value="contract">Contract</option><option value="intern">Intern</option></select></div>
        <div class="form-group"><label class="form-label">Status *</label>
          <select class="form-control" id="ed-status"><option value="active">Active</option><option value="on_leave">On Leave</option><option value="inactive">Inactive</option><option value="terminated">Terminated</option></select></div>
        <div class="form-group"><label class="form-label">Basic Salary ($) *</label><input class="form-control" id="ed-salary" type="number" min="0"></div>
        <div class="form-group"><label class="form-label">Transport Allow. ($)</label><input class="form-control" id="ed-trans" type="number" min="0"></div>
        <div class="form-group"><label class="form-label">Medical Allow. ($)</label><input class="form-control" id="ed-med" type="number" min="0"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-edit-emp')">Cancel</button>
      <button class="btn btn-primary" onclick="submitEditEmployee()"><i class="fas fa-save"></i> Update Employee</button>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script>
let empPage = 1;
let employeeCache = [];
const hierarchyLevels = @json($hierarchyLevels);
const hierarchyMap = Object.fromEntries(hierarchyLevels.map(l => [l.key, l]));
$(document).ready(function(){
  hydrateLevelSelects();
  loadDepts(); loadManagerOptions(); loadEmployees();
  let t;
  $('#emp-search').on('input',function(){ clearTimeout(t); t=setTimeout(()=>{empPage=1;loadEmployees();},350); });
  $('#dept-filter,#status-filter,#grade-filter').on('change',function(){empPage=1;loadEmployees();});
});
function hydrateLevelSelects(){
  const opts = hierarchyLevels.map(l => `<option value="${l.key}">${l.key} - ${l.label}</option>`).join('');
  $('#ef-grade,#ed-grade,#hf-grade').html(opts);
  $('#ef-grade').val(hierarchyLevels.find(l => l.key === 'L2') ? 'L2' : (hierarchyLevels.at(-1)?.key || ''));
}
function loadDepts(){
  $.get('/employees/departments/list',function(data){
    $('#s-depts').text(data.length);
    data.forEach(d=>{ $('#dept-filter,#ef-dept,#ed-dept').append(`<option value="${d.id}">${d.name}</option>`); });
  });
}
function loadManagerOptions(selectedId=null, excludeId=null){
  $.get('/employees/list',{status:'active',per_page:200},function(res){
    const opts=['<option value="">Top level / no supervisor</option>'];
    employeeCache = res.data?.data || [];
    employeeCache.forEach(e=>{
      if(excludeId && Number(e.id)===Number(excludeId)) return;
      const lvl = hierarchyMap[e.grade]?.label || e.grade;
      opts.push(`<option value="${e.id}">${e.full_name} - ${lvl} (${e.employee_id})</option>`);
    });
    $('#ef-manager,#ed-manager').html(opts.join(''));
    if(selectedId) $('#ed-manager').val(selectedId);
    renderHierarchyEmployeeOptions();
  });
}
function renderHierarchyEmployeeOptions() {
  const opts = ['<option value="">Select employee...</option>'];
  employeeCache.forEach(e => {
    const lvl = hierarchyMap[e.grade]?.label || e.grade;
    opts.push(`<option value="${e.id}">${e.full_name} - ${lvl} (${e.employee_id})</option>`);
  });
  $('#hf-employee').html(opts.join(''));
  refreshHierarchyManagerOptions();
}
function refreshHierarchyManagerOptions() {
  const employeeId = Number($('#hf-employee').val() || 0);
  const opts = ['<option value="">Top level / no boss</option>'];
  employeeCache.forEach(e => {
    if (Number(e.id) === employeeId) return;
    const lvl = hierarchyMap[e.grade]?.label || e.grade;
    opts.push(`<option value="${e.id}">${e.full_name} - ${lvl} (${e.employee_id})</option>`);
  });
  $('#hf-manager').html(opts.join(''));
}
function openHierarchyModal(employeeId=null) {
  renderHierarchyEmployeeOptions();
  $('#hf-employee').val(employeeId || '');
  syncHierarchyFormFromEmployee();
  openModal('modal-hierarchy');
}
function syncHierarchyFormFromEmployee() {
  const employeeId = Number($('#hf-employee').val() || 0);
  const employee = employeeCache.find(e => Number(e.id) === employeeId);
  refreshHierarchyManagerOptions();
  if (!employee) {
    $('#hierarchy-preview').html('<div class="hierarchy-empty">Choose an employee to preview reporting line.</div>');
    return;
  }
  $('#hf-grade').val(employee.grade);
  $('#hf-manager').val(employee.reporting_manager_id || '');
  updateHierarchyPreview();
}
function hierarchyPersonCard(employee, label, active=false) {
  if (!employee) {
    return `<div class="hierarchy-person">
      <div class="hierarchy-avatar"><i class="fas fa-crown"></i></div>
      <div><div class="hierarchy-name">${label}</div><div class="hierarchy-role">Top level / no boss assigned</div><span class="hierarchy-badge">Root</span></div>
    </div>`;
  }
  const level = hierarchyMap[employee.grade]?.label || employee.grade || 'Level';
  return `<div class="hierarchy-person ${active ? 'active' : ''}">
    <div class="hierarchy-avatar">${employee.initials || '?'}</div>
    <div>
      <div class="hierarchy-name">${employee.full_name}</div>
      <div class="hierarchy-role">${employee.position || '-'} · ${employee.department?.name || '-'}</div>
      <span class="hierarchy-badge">${employee.grade || ''} - ${level}</span>
    </div>
  </div>`;
}
function updateHierarchyPreview() {
  const employeeId = Number($('#hf-employee').val() || 0);
  const managerId = Number($('#hf-manager').val() || 0);
  const employee = employeeCache.find(e => Number(e.id) === employeeId);
  if (!employee) {
    $('#hierarchy-preview').html('<div class="hierarchy-empty">Choose an employee to preview reporting line.</div>');
    return;
  }
  const selectedGrade = $('#hf-grade').val();
  const manager = employeeCache.find(e => Number(e.id) === managerId);
  const boss = employee.manager?.full_name || 'Top level / no boss';
  const reports = Number(employee.subordinates_count || 0);
  const previewEmployee = {...employee, grade: selectedGrade};
  $('#hierarchy-preview').html(`
    ${hierarchyPersonCard(manager, 'Top level / no boss')}
    <div class="hierarchy-arrow"><i class="fas fa-arrow-down"></i></div>
    ${hierarchyPersonCard(previewEmployee, 'Employee', true)}
    <div style="border-top:1px solid var(--border);padding-top:10px;margin-top:12px;font-size:11px;color:var(--text-muted);line-height:1.6">
      Current boss: <strong style="color:var(--text-primary)">${boss}</strong><br>
      Direct reports: <strong style="color:var(--text-primary)">${reports}</strong>
    </div>
  `);
}
function saveHierarchyAssignment() {
  const id = $('#hf-employee').val();
  if (!id) { showToast('Select an employee first', 'error'); return; }
  const data = { grade: $('#hf-grade').val(), reporting_manager_id: $('#hf-manager').val() };
  const $btn = $('#btn-save-hierarchy').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
  $.post(`/employees/${id}/hierarchy`, data, function(res) {
    showToast(res.message || 'Hierarchy assignment saved', 'success');
    closeModal('modal-hierarchy');
    loadEmployees();
    loadManagerOptions();
  }).fail(xhr => showToast(xhr.responseJSON?.message || Object.values(xhr.responseJSON?.errors || {}).flat()[0] || 'Unable to save hierarchy', 'error'))
    .always(() => $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Save Assignment'));
}
function loadEmployees(){
  $('#emp-loading').show(); $('#emp-table-wrap').hide();
  $.get('/employees/list',{search:$('#emp-search').val(),department:$('#dept-filter').val(),status:$('#status-filter').val(),grade:$('#grade-filter').val(),page:empPage},function(res){
    const d=res.data;
    $('#s-total').text(res.stats.total);$('#s-active').text(res.stats.active);$('#s-leave').text(res.stats.on_leave);$('#s-inactive').text(res.stats.inactive);
    const tbody=$('#emp-tbody').empty();
    if(!d.data.length){tbody.html('<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-search" style="font-size:24px;display:block;margin-bottom:10px"></i>No employees match your filters</td></tr>');}
    else{
      const gc={L1:'var(--text-muted)',L2:'var(--accent-cyan)',L3:'var(--accent-teal)',L4:'var(--accent-amber)',L5:'var(--accent-violet)'};
      const sc={active:'badge-active',on_leave:'badge-pending',inactive:'badge-inactive',terminated:'badge-rejected'};
      d.data.forEach(emp=>tbody.append(`<tr>
        <td><div class="emp-cell"><div class="emp-avatar">${emp.initials}</div><div class="emp-info"><h4>${emp.full_name}</h4><span>${emp.email}</span></div></div></td>
        <td style="color:var(--text-muted);font-family:'Syne',sans-serif;font-size:11px;font-weight:700">${emp.employee_id}</td>
        <td><span style="display:inline-flex;align-items:center;gap:5px;font-size:12px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);display:inline-block"></span>${emp.department?.name||'—'}</span></td>
        <td>${emp.position}</td>
        <td><span style="font-size:11px;font-weight:700;color:${gc[emp.grade]||'var(--accent-cyan)'}">${emp.grade} - ${hierarchyMap[emp.grade]?.label||'Level'}</span></td>
        <td style="font-size:12px;color:var(--text-secondary)">${emp.manager?.full_name||'Top level'}</td>
        <td style="font-size:11px">${fmtDate(emp.join_date)}</td>
        <td><span class="badge ${sc[emp.status]||'badge-pending'}">${emp.status.replace('_',' ')}</span></td>
        <td style="text-align:center">
          <div style="display:flex;gap:4px;justify-content:center">
            <button class="btn btn-secondary btn-sm" title="View" onclick="viewEmployee(${emp.id})"><i class="fas fa-eye"></i></button>
            <button class="btn btn-secondary btn-sm" title="Assign Boss" onclick="openHierarchyModal(${emp.id})"><i class="fas fa-sitemap"></i></button>
            <button class="btn btn-amber btn-sm" title="Edit" onclick='editEmployee(${emp.id},${JSON.stringify(emp)})'><i class="fas fa-edit"></i></button>
            <button class="btn btn-danger btn-sm" title="Archive" onclick="archiveEmployee(${emp.id},'${emp.full_name.replace(/'/g,"\\'")}')"><i class="fas fa-archive"></i></button>
          </div>
        </td>
      </tr>`));
    }
    $('#emp-loading').hide();$('#emp-table-wrap').show();
    renderPagination(d,'emp-pagination',`function(p){empPage=p;loadEmployees()}`);
  }).fail(()=>{$('#emp-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error loading. <button class="btn btn-secondary btn-sm" onclick="loadEmployees()">Retry</button>');});
}
function viewEmployee(id){
  $.get(`/employees/${id}`,function(emp){
    const gl={L1:'Junior',L2:'Mid-level',L3:'Senior',L4:'Lead',L5:'Director'};
    const sc={active:'badge-active',on_leave:'badge-pending',inactive:'badge-inactive',terminated:'badge-rejected'};
    const html=`<div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)">
      <div style="width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet));display:grid;place-items:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0">${emp.initials}</div>
      <div><h2 style="font-family:'Syne',sans-serif;font-size:20px;font-weight:800;margin-bottom:4px">${emp.full_name}</h2>
      <p style="font-size:12px;color:var(--text-secondary)">${emp.position} · ${emp.department?.name||'—'}</p>
      <div style="display:flex;gap:8px;margin-top:8px"><span class="badge ${sc[emp.status]||'badge-pending'}">${emp.status.replace('_',' ')}</span><span class="badge badge-approved">${emp.employee_id}</span></div></div></div>
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
        ${[['Email','fas fa-envelope',emp.email,'var(--accent-cyan)'],['Phone','fas fa-phone',emp.phone||'—','var(--accent-teal)'],['Join Date','fas fa-calendar',fmtDate(emp.join_date),'var(--accent-violet)'],['Grade','fas fa-layer-group',emp.grade+' — '+(gl[emp.grade]||''),'var(--accent-amber)'],['Salary','fas fa-dollar-sign',fmtCurrency(emp.basic_salary),'var(--accent-teal)'],['Type','fas fa-briefcase',emp.employment_type,'var(--text-secondary)']].map(([l,ic,v,c])=>`
          <div style="background:var(--bg-hover);border-radius:8px;padding:12px">
            <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px"><i class="${ic}" style="color:${c};font-size:11px;width:14px"></i><span style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px">${l}</span></div>
            <div style="font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${v}</div>
          </div>`).join('')}
      </div>`;
    // Show in a simple modal
    if(!$('#modal-view-emp').length) $('body').append(`<div class="modal-overlay" id="modal-view-emp"><div class="modal" style="max-width:640px"><div class="modal-header"><span class="modal-title"><i class="fas fa-id-badge" style="color:var(--accent-violet);margin-right:8px"></i>Employee Profile</span><button class="modal-close" onclick="closeModal('modal-view-emp')"><i class="fas fa-times"></i></button></div><div class="modal-body" id="view-emp-body"></div><div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-view-emp')">Close</button></div></div></div>`);
    $('#view-emp-body').html(html);
    openModal('modal-view-emp');
  });
}
function editEmployee(id,emp){
  if(typeof emp==='string') emp=JSON.parse(emp);
  $('#edit-id').val(id);$('#ed-fname').val(emp.first_name);$('#ed-lname').val(emp.last_name);
  $('#ed-email').val(emp.email);$('#ed-phone').val(emp.phone||'');$('#ed-pos').val(emp.position);
  $('#ed-grade').val(emp.grade);$('#ed-type').val(emp.employment_type);$('#ed-status').val(emp.status);
  $('#ed-salary').val(emp.basic_salary);$('#ed-trans').val(emp.transport_allowance||'');$('#ed-med').val(emp.medical_allowance||'');
  loadManagerOptions(emp.reporting_manager_id, id);
  setTimeout(()=>$('#ed-dept').val(emp.department_id),100);
  openModal('modal-edit-emp');
}
function submitEditEmployee(){
  const id=$('#edit-id').val();
  const d={first_name:$('#ed-fname').val(),last_name:$('#ed-lname').val(),email:$('#ed-email').val(),phone:$('#ed-phone').val(),department_id:$('#ed-dept').val(),position:$('#ed-pos').val(),grade:$('#ed-grade').val(),reporting_manager_id:$('#ed-manager').val(),employment_type:$('#ed-type').val(),status:$('#ed-status').val(),basic_salary:$('#ed-salary').val(),transport_allowance:$('#ed-trans').val(),medical_allowance:$('#ed-med').val(),_method:'PUT'};
  $.post(`/employees/${id}`,d,res=>{showToast('Employee updated!','success');closeModal('modal-edit-emp');loadEmployees();})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}
function archiveEmployee(id,name){
  if(!confirm(`Archive ${name}?`)) return;
  $.post(`/employees/${id}/archive`,{},()=>{showToast(`${name} archived`,'success');loadEmployees();})
   .fail(()=>showToast('Error archiving','error'));
}
function submitAddEmployee(){
  ['fname','lname','email','dept','pos','salary'].forEach(f=>$(`#err-${f}`).text(''));
  const d={first_name:$('#ef-fname').val().trim(),last_name:$('#ef-lname').val().trim(),email:$('#ef-email').val().trim(),phone:$('#ef-phone').val().trim(),department_id:$('#ef-dept').val(),position:$('#ef-pos').val().trim(),grade:$('#ef-grade').val(),reporting_manager_id:$('#ef-manager').val(),employment_type:$('#ef-type').val(),join_date:$('#ef-join').val(),basic_salary:$('#ef-salary').val(),transport_allowance:$('#ef-trans').val()||400,medical_allowance:$('#ef-med').val()||300,bank_name:$('#ef-bank').val().trim(),bank_account:$('#ef-acc').val().trim(),date_of_birth:$('#ef-dob').val(),gender:$('#ef-gender').val(),address:$('#ef-address').val().trim()};
  let ok=true;
  if(!d.first_name){$('#err-fname').text('Required');ok=false;}
  if(!d.last_name){$('#err-lname').text('Required');ok=false;}
  if(!d.email){$('#err-email').text('Required');ok=false;}
  if(!d.department_id){$('#err-dept').text('Select a department');ok=false;}
  if(!d.position){$('#err-pos').text('Required');ok=false;}
  if(!d.basic_salary){$('#err-salary').text('Required');ok=false;}
  if(!ok) return;
  const $btn=$('#btn-save-emp').prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Saving…');
  $.post('/employees',d,res=>{showToast(res.message||'Employee added!','success');closeModal('modal-add-emp');loadEmployees();loadManagerOptions();$('#ef-fname,#ef-lname,#ef-email,#ef-phone,#ef-pos,#ef-salary,#ef-trans,#ef-med,#ef-bank,#ef-acc,#ef-dob,#ef-address').val('');$('#ef-dept,#ef-gender,#ef-manager').val('');$('#ef-grade').val(hierarchyLevels.find(l => l.key === 'L2') ? 'L2' : (hierarchyLevels.at(-1)?.key || ''));$('#ef-type').val('full-time');})
   .fail(xhr=>{const errs=xhr.responseJSON?.errors||{};Object.entries(errs).forEach(([k,msgs])=>{const key=k.replace('_','');$(`#err-${key}`).text(msgs[0]);});showToast('Fix the errors above','error');})
   .always(()=>$btn.prop('disabled',false).html('<i class="fas fa-check"></i> Add Employee'));
}
</script>
@endpush