{% extends "base.html" %}
{% block title %}Bulk Increment · WageWise Neo{% endblock %}
{% block content %}
<div class="page-header">
    <div><div class="eyebrow">Increments</div><h1>Bulk Salary Increment</h1></div>
</div>
<div class="panel">
    <p>Enter the increment amount for each employee. Leave blank to skip. WageWise adds it to their current take-home and reverse-calculates all components automatically.</p>
    <form method="post">
        <div class="form-grid" style="margin-bottom:16px;">
            <div class="field">
                <label>Effective From Date *</label>
                <input type="date" name="effective_from" value="{{ today }}" required>
            </div>
            <div class="field">
                <label>Notes (optional)</label>
                <input type="text" name="notes" placeholder="e.g. Annual increment FY 2026-27">
            </div>
        </div>
        <table class="ledger-table" style="margin-bottom:16px;">
            <thead><tr>
                <th>Employee</th><th>Designation</th>
                <th class="num">Last Increment</th>
                <th>Last Increment Date</th>
                <th class="num">Current Take-Home</th>
                <th class="num">Increment (&#8377;)</th>
                <th class="num">New Take-Home</th>
            </tr></thead>
            <tbody>
            {% for emp in employees %}
            {% set last = last_increments.get(emp.id, {}) %}
            <tr>
                <td class="name-cell">{{ emp.full_name }}</td>
                <td>{{ emp.designation or '—' }}</td>
                <td class="num" style="font-family:var(--font-data);color:{{ 'var(--color-paid)' if last.amount else 'var(--color-ink-faint)' }};">
                    {% if last.amount %}+₹{{ "{:,.0f}".format(last.amount) }}
                    {% elif last.date %}<span style="font-size:12px;">First entry</span>
                    {% else %}—{% endif %}
                </td>
                <td style="font-size:13px;color:var(--color-ink-soft);">{{ last.date or '—' }}</td>
                <td class="num" style="font-family:var(--font-data);">₹{{ "{:,.0f}".format(emp.take_home_salary or 0) }}</td>
                <td>
                    <input type="number" step="1" name="increment_{{ emp.id }}"
                           id="inc_{{ emp.id }}" placeholder="0"
                           data-current="{{ emp.take_home_salary or 0 }}"
                           oninput="recalcIncrement({{ emp.id }})"
                           style="width:120px;font-family:var(--font-data);padding:4px 8px;border:1px solid var(--color-rule-strong);border-radius:3px;text-align:right;">
                </td>
                <td class="num" style="font-family:var(--font-data);font-weight:600;color:var(--color-paid);">
                    <span id="new_{{ emp.id }}">₹{{ "{:,.0f}".format(emp.take_home_salary or 0) }}</span>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="actions-row">
            <button type="submit" class="btn btn-primary">Apply Increment</button>
            <a href="{{ url_for('increment_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
<script>
function recalcIncrement(empId) {
    var input = document.getElementById('inc_' + empId);
    var current = parseFloat(input.dataset.current) || 0;
    var increment = parseFloat(input.value) || 0;
    var newTotal = current + increment;
    document.getElementById('new_' + empId).textContent = '₹' + Math.round(newTotal).toLocaleString('en-IN');
}
</script>
{% endblock %}