{% extends "base.html" %}
{% block title %}Increment · {{ emp.full_name }} · WageWise Neo{% endblock %}
{% block content %}
<div class="page-header">
    <div><div class="eyebrow">Increments</div><h1>{{ emp.full_name }}</h1></div>
</div>
<!-- Current Salary Summary -->
<div class="card-grid" style="margin-bottom:20px;">
    <div class="stat-card">
        <div class="label">Current Take-Home</div>
        <div class="value">₹{{ "{:,.0f}".format(emp.take_home_salary or 0) }}</div>
        <div class="sub">In hand per month</div>
    </div>
    <div class="stat-card">
        <div class="label">Current Gross</div>
        <div class="value">₹{{ "{:,.0f}".format((emp.basic_salary or 0)+(emp.da or 0)+(emp.hra or 0)+(emp.travel_allowance or 0)+(emp.other_allowance or 0)) }}</div>
        <div class="sub">Basic + DA + HRA + Travel + Other</div>
    </div>
    <div class="stat-card">
        <div class="label">Joined On</div>
        <div class="value" style="font-size:18px;">{{ (emp.date_of_joining|dateonly) or '—' }}</div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;">
<div class="panel">
    <h3 style="margin-bottom:16px;">Current Salary Breakdown</h3>
    <table class="ledger-table" style="font-size:13px;">
        <tbody>
            <tr><td>Basic</td><td class="num">₹{{ "{:,.0f}".format(emp.basic_salary or 0) }}</td></tr>
            <tr><td>DA</td><td class="num">₹{{ "{:,.0f}".format(emp.da or 0) }}</td></tr>
            <tr><td>HRA</td><td class="num">₹{{ "{:,.0f}".format(emp.hra or 0) }}</td></tr>
            <tr><td>Travel Allowance</td><td class="num">₹{{ "{:,.0f}".format(emp.travel_allowance or 0) }}</td></tr>
            <tr><td>Other Allowance</td><td class="num">₹{{ "{:,.0f}".format(emp.other_allowance or 0) }}</td></tr>
        </tbody>
    </table>

    <form method="post" style="margin-top:20px;">
        <div class="form-grid">
            <div class="field" style="grid-column:1/-1;">
                <label>New Take-Home Salary (₹) *</label>
                <input type="number" step="1" name="takehome" required
                       value="{{ emp.take_home_salary or '' }}" id="th_input"
                       placeholder="Enter new take-home amount">
                <span class="field-hint" id="calc_preview" style="color:var(--color-stamp);"></span>
            </div>
            <div class="field">
                <label>Effective From Date *</label>
                <input type="date" name="effective_from" value="{{ today }}" required>
            </div>
            <div class="field">
                <label>Notes</label>
                <input type="text" name="notes" placeholder="e.g. Annual increment FY 2026-27">
            </div>
            <div class="field" style="grid-column:1/-1;">
                <label style="display:flex;gap:8px;align-items:center;cursor:pointer;">
                    <input type="checkbox" name="update_current" checked style="width:16px;height:16px;">
                    Update employee record immediately (recommended)
                </label>
                <span class="field-hint">If unchecked, only adds to salary history — current record stays unchanged.</span>
            </div>
        </div>
        <div class="actions-row">
            <button type="submit" class="btn btn-primary">Save Increment</button>
            <a href="{{ url_for('increment_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% if history %}
<div class="panel">
    <div class="panel-title"><h2>Salary History</h2></div>
    <table class="ledger-table">
        <thead>
            <tr>
                <th>Effective From</th>
                <th>Valid Until</th>
                <th class="num">Take-Home</th>
                <th class="num">Basic</th>
                <th class="num">DA</th>
                <th class="num">HRA</th>
                <th class="num">Gross</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
        {% for i, h in history|enumerate %}
        <tr>
            <td style="font-family:var(--font-data);">{{ h.effective_from }}</td>
            <td class="meta">
                {% if i == 0 %}
                <span class="stamp active">Current</span>
                {% else %}
                {{ history[i-1].effective_from }}
                {% endif %}
            </td>
            <td class="num" style="font-weight:{{ '600' if i==0 else 'normal' }};color:{{ 'var(--color-paid)' if i==0 else 'inherit' }};">
                ₹{{ "{:,.0f}".format(h.take_home) }}
            </td>
            <td class="num">₹{{ "{:,.0f}".format(h.basic_salary) }}</td>
            <td class="num">₹{{ "{:,.0f}".format(h.da) }}</td>
            <td class="num">₹{{ "{:,.0f}".format(h.hra) }}</td>
            <td class="num">₹{{ "{:,.0f}".format(h.gross_salary) }}</td>
            <td class="meta">{{ h.notes or '—' }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
</div><!-- close grid -->
{% endif %}
<script>
document.getElementById('th_input').addEventListener('input', function() {
    var v = parseFloat(this.value);
    if (!v) { document.getElementById('calc_preview').textContent=''; return; }
    fetch('/api/takehome-to-gross', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({takehome: v, state: '{{ emp.state or "Karnataka" }}'})
    }).then(r=>r.json()).then(d=>{
        if(d.ok) {
            var r = d.result;
            document.getElementById('calc_preview').textContent =
                'Gross: ₹' + Math.round(r.monthly_gross).toLocaleString('en-IN') +
                '  |  CTC: ₹' + Math.round(r.ctc_monthly).toLocaleString('en-IN') +
                '  |  PF: ₹' + Math.round(r.pf.employee).toLocaleString('en-IN') +
                '  |  ESI: ₹' + Math.round(r.esi.employee).toLocaleString('en-IN');
        }
    });
});
</script>
{% endblock %}