{% extends "base.html" %}
{% block title %}Employees · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Workspace</div>
        <h1>Employees</h1>
    </div>
    <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
        <div style="position:relative;">
            <input type="text" id="emp-search"
                   placeholder="Search name, code, role..."
                   oninput="filterEmployees(this.value)"
                   style="padding:7px 12px 7px 34px;border:1.5px solid var(--color-rule-strong);border-radius:20px;font-size:13px;width:220px;background:var(--color-paper-raised);">
            <span style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--color-ink-faint);">&#128269;</span>
        </div>
        <span id="search-count" style="font-size:12px;color:var(--color-ink-faint);display:none;"></span>
        <a href="{{ url_for('employee_import') }}" class="btn btn-secondary">&#8659; Import from Excel</a>
        <a href="{{ url_for('new_employee') }}" class="btn btn-primary">+ Add Employee</a>
    </div>
</div>

<!-- Active / Inactive Tabs -->
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:2px solid var(--color-rule);">
    <a href="{{ url_for('employees', tab='active') }}"
       style="padding:8px 20px;font-size:13px;font-weight:600;text-decoration:none;border-bottom:3px solid {{ 'var(--color-ink)' if tab=='active' else 'transparent' }};color:{{ 'var(--color-ink)' if tab=='active' else 'var(--color-ink-soft)' }};margin-bottom:-2px;">
        Active Employees
        <span style="background:var(--color-paid-bg);color:var(--color-paid);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:4px;">{{ active_count }}</span>
    </a>
    <a href="{{ url_for('employees', tab='inactive') }}"
       style="padding:8px 20px;font-size:13px;font-weight:600;text-decoration:none;border-bottom:3px solid {{ 'var(--color-ink)' if tab=='inactive' else 'transparent' }};color:{{ 'var(--color-ink)' if tab=='inactive' else 'var(--color-ink-soft)' }};margin-bottom:-2px;">
        Ex-Employees / Inactive
        <span style="background:var(--color-due-bg);color:var(--color-due);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:4px;">{{ inactive_count }}</span>
    </a>
</div>

<div class="panel">
    {% if employees %}
    <table class="ledger-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Department</th>
                <th>Date of Joining</th>
                <th>Status</th>
                <th class="num">Gross / month</th>
            </tr>
        </thead>
        <tbody id="emp-tbody">
            {% for e in employees %}
            <tr class="emp-row" data-search="{{ (e.full_name ~ ' ' ~ (e.employee_code or '') ~ ' ' ~ (e.designation or '') ~ ' ' ~ (e.department or ''))|lower }}">
                <td style="padding:4px 8px;width:44px;">
                                        <img src="/photo/{{ e.id }}" alt="{{ initial(e.full_name) }}"
                         style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--color-rule);"
                         onerror="this.outerHTML='<div style=&quot;width:36px;height:36px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;&quot;>{{ initial(e.full_name) }}</div>'">
                </td>
                <td class="name-cell">
                    <a href="{{ url_for('employee_detail', employee_id=e.id) }}">{{ e.full_name }}</a>
                    <div class="meta">{{ e.employee_code or '—' }}</div>
                </td>
                <td>{{ e.designation or '—' }}</td>
                <td>{{ e.department or '—' }}</td>
                <td class="meta">{{ (e.date_of_joining|dateonly) or '—' }}</td>
                <td><span class="stamp {{ 'active' if e.status == 'active' else 'inactive' }}">{{ e.status }}</span></td>
                <td class="num">&#8377;{{ "{:,.0f}".format(e.basic_salary + e.da + e.hra + e.other_allowance) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <div class="glyph">&mdash;</div>
        <p>No employees yet.</p>
        <a href="{{ url_for('new_employee') }}" class="btn btn-primary">Add Employee</a>
    </div>
    {% endif %}
</div>

<script>
function filterEmployees(q) {
    q = q.toLowerCase().trim();
    var rows = document.querySelectorAll('#emp-tbody .emp-row');
    var n = 0;
    rows.forEach(function(r) {
        var show = !q || r.dataset.search.indexOf(q) !== -1;
        r.style.display = show ? '' : 'none';
        if (show) n++;
    });
    var el = document.getElementById('search-count');
    el.textContent = q ? n + ' of ' + rows.length + ' employees' : '';
    el.style.display = q ? 'inline' : 'none';
}
document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey||e.metaKey) && e.key==='f') {
        var s = document.getElementById('emp-search');
        if (s) { e.preventDefault(); s.focus(); s.select(); }
    }
});
</script>
{% endblock %}