{% extends "base.html" %}
{% block title %}New Payroll Run · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Payroll Runs</div>
        <h1>Generate Payroll Run</h1>
    </div>
</div>

<div class="panel" style="max-width: 480px;">
    <p>Select the month and year. WageWise will pull attendance and variable pay for that period and compute each employee's payslip automatically.</p>
    <form method="post" style="margin-top: 20px;">
        <div class="form-grid">
            <div class="field">
                <label for="month">Month</label>
                <select id="month" name="month">
                    {% for m in months %}
                    <option value="{{ m }}" {{ 'selected' if m == today.month }}>
                        {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m-1] }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="field">
                <label for="year">Year</label>
                <input type="number" id="year" name="year" value="{{ today.year }}" min="2020" max="2099">
            </div>
        </div>
        <!-- Variable Pay: Commission & OT -->
        <div style="margin-top:24px;">
            <h3 style="margin-bottom:4px;">Variable Pay This Month</h3>
            <p class="field-hint" style="margin-bottom:12px;">Enter commission, collection and OT for applicable employees. Leave blank to skip.</p>
            {% if variable_pay_employees %}
            <div style="overflow-x:auto;">
            <table class="ledger-table" style="font-size:13px;">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Commission Basis</th>
                        <th class="num">Sales (₹)</th>
                        <th class="num">Collection (₹)</th>
                        <th class="num">OT Hours</th>
                        <th class="num">OT Rate/hr</th>
                    </tr>
                </thead>
                <tbody>
                {% for emp in variable_pay_employees %}
                <tr>
                    <td class="name-cell">{{ emp.full_name }}<div class="meta">{{ emp.designation or '' }}</div></td>
                    <td class="meta">{{ emp.commission_basis or 'none' }}</td>
                    <td><input type="number" step="0.01" name="sales_{{ emp.id }}" placeholder="0"
                        style="width:110px;padding:4px 8px;border:1px solid var(--color-rule-strong);border-radius:3px;font-family:var(--font-data);font-size:12px;text-align:right;"></td>
                    <td><input type="number" step="0.01" name="collection_{{ emp.id }}" placeholder="0"
                        style="width:110px;padding:4px 8px;border:1px solid var(--color-rule-strong);border-radius:3px;font-family:var(--font-data);font-size:12px;text-align:right;"></td>
                    <td><input type="number" step="0.5" name="ot_hrs_{{ emp.id }}" placeholder="0"
                        style="width:80px;padding:4px 8px;border:1px solid var(--color-rule-strong);border-radius:3px;font-family:var(--font-data);font-size:12px;text-align:right;"></td>
                    <td class="num meta">₹{{ emp.overtime_rate_per_hour or 0 }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
            {% else %}
            <p class="meta">No employees have commission or OT configured. Set it up in the employee record (OT & Commission tab).</p>
            {% endif %}
        </div>

        <div class="actions-row">
            <button type="submit" class="btn btn-primary">Generate</button>
            <a href="{{ url_for('payroll_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

{% endblock %}