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

<div class="page-header">
    <div>
        <div class="eyebrow">Reports</div>
        <h1>Payslip Generator</h1>
    </div>
    <div>
        <a href="{{ url_for('reports_index') }}" class="btn btn-secondary">&larr; Back to Reports</a>
    </div>
</div>

<form method="post" action="{{ url_for('payslip_generator_results') }}" target="_blank">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">

    <div class="panel">
        <div class="panel-title" style="display:flex;justify-content:space-between;align-items:center;">
            <h2>1. Select Employees</h2>
            <span style="font-size:12px;">
                <a href="#" onclick="toggleAll('emp', true); return false;">All</a> ·
                <a href="#" onclick="toggleAll('emp', false); return false;">None</a>
            </span>
        </div>
        <input type="text" id="emp_search" placeholder="Search employee name or code..."
               style="width:100%;padding:8px 10px;margin-bottom:10px;border:1px solid var(--color-rule);border-radius:4px;"
               oninput="filterEmployees()">
        <div style="max-height:420px;overflow-y:auto;border:1px solid var(--color-rule);border-radius:4px;padding:8px;">
            {% for emp in employees %}
            <label class="emp-row" data-search="{{ (emp.full_name + ' ' + (emp.employee_code or ''))|lower }}"
                   style="display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;border-radius:3px;">
                <input type="checkbox" name="employee_ids" value="{{ emp.id }}" class="emp-check">
                <span style="font-size:13px;">
                    {{ emp.full_name }}
                    <span class="meta" style="margin-left:6px;">{{ emp.employee_code or '' }} {% if emp.designation %}· {{ emp.designation }}{% endif %}</span>
                </span>
            </label>
            {% else %}
            <p class="meta">No active employees found.</p>
            {% endfor %}
        </div>
    </div>

    <div class="panel">
        <div class="panel-title" style="display:flex;justify-content:space-between;align-items:center;">
            <h2>2. Select Months</h2>
            <span style="font-size:12px;">
                <a href="#" onclick="toggleAll('run', true); return false;">All</a> ·
                <a href="#" onclick="toggleAll('run', false); return false;">None</a>
            </span>
        </div>
        <div style="max-height:420px;overflow-y:auto;border:1px solid var(--color-rule);border-radius:4px;padding:8px;margin-top:38px;">
            {% for run in runs %}
            <label style="display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;">
                <input type="checkbox" name="run_ids" value="{{ run.id }}" class="run-check">
                <span style="font-size:13px;">{{ run.label }}</span>
            </label>
            {% else %}
            <p class="meta">No payroll runs generated yet.</p>
            {% endfor %}
        </div>
    </div>

</div>

<div class="panel" style="margin-top:16px;text-align:center;">
    <button type="submit" class="btn btn-primary" style="font-size:15px;padding:12px 36px;">
        3. Generate Payslip List &rarr;
    </button>
    <p class="meta" style="margin-top:8px;">Opens a results page in a new tab with View and Download options.</p>
</div>
</form>

<script>
function filterEmployees() {
    var q = document.getElementById('emp_search').value.toLowerCase();
    document.querySelectorAll('.emp-row').forEach(function(row) {
        row.style.display = row.dataset.search.indexOf(q) !== -1 ? 'flex' : 'none';
    });
}
function toggleAll(kind, checked) {
    var cls = kind === 'emp' ? '.emp-check' : '.run-check';
    document.querySelectorAll(cls).forEach(function(cb) {
        if (cb.closest('label').style.display !== 'none') cb.checked = checked;
    });
}
</script>
{% endblock %}