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

<div class="page-header">
    <div><div class="eyebrow">Setup</div><h1>Departments &amp; Designations</h1></div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">

<!-- ── Departments ─────────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Departments</h2></div>

    <form method="post" style="display:flex;gap:8px;margin-bottom:20px;">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="list_type" value="department">
        <input type="text" name="name" placeholder="New department name" required
               style="flex:1;padding:7px 10px;border:1.5px solid var(--color-rule-strong);border-radius:4px;font-size:13px;">
        <button type="submit" class="btn btn-primary">+ Add</button>
    </form>

    {% if departments %}
    <table class="ledger-table">
        <thead><tr><th>#</th><th>Department Name</th><th></th></tr></thead>
        <tbody>
        {% for dept in departments %}
        <tr>
            <td class="meta">{{ loop.index }}</td>
            <td id="dept_name_{{ dept.id }}" style="font-size:13px;font-weight:500;">{{ dept.name }}</td>
            <td style="display:flex;gap:6px;justify-content:flex-end;">
                <!-- Rename inline -->
                <button onclick="startRename('dept','{{ dept.id }}','{{ dept.name }}')"
                        class="btn btn-secondary" style="font-size:11px;padding:2px 8px;">Rename</button>
                <!-- Delete -->
                <form method="post" style="display:inline;"
                      onsubmit="return confirm('Delete department: {{ dept.name }}?')">
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="list_type" value="department">
                    <input type="hidden" name="item_id" value="{{ dept.id }}">
                    <button type="submit" class="btn btn-secondary"
                            style="font-size:11px;padding:2px 8px;color:var(--color-due);">Delete</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="meta">No departments yet. Add one above.</p>
    {% endif %}
</div>

<!-- ── Designations ────────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Designations</h2></div>

    <form method="post" style="display:flex;gap:8px;margin-bottom:20px;">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="list_type" value="designation">
        <input type="text" name="name" placeholder="New designation name" required
               style="flex:1;padding:7px 10px;border:1.5px solid var(--color-rule-strong);border-radius:4px;font-size:13px;">
        <button type="submit" class="btn btn-primary">+ Add</button>
    </form>

    {% if designations %}
    <table class="ledger-table">
        <thead><tr><th>#</th><th>Designation Name</th><th></th></tr></thead>
        <tbody>
        {% for desig in designations %}
        <tr>
            <td class="meta">{{ loop.index }}</td>
            <td id="desig_name_{{ desig.id }}" style="font-size:13px;font-weight:500;">{{ desig.name }}</td>
            <td style="display:flex;gap:6px;justify-content:flex-end;">
                <button onclick="startRename('desig','{{ desig.id }}','{{ desig.name }}')"
                        class="btn btn-secondary" style="font-size:11px;padding:2px 8px;">Rename</button>
                <form method="post" style="display:inline;"
                      onsubmit="return confirm('Delete designation: {{ desig.name }}?')">
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="list_type" value="designation">
                    <input type="hidden" name="item_id" value="{{ desig.id }}">
                    <button type="submit" class="btn btn-secondary"
                            style="font-size:11px;padding:2px 8px;color:var(--color-due);">Delete</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="meta">No designations yet. Add one above.</p>
    {% endif %}
</div>

</div>

<!-- Rename modal -->
<div id="rename-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;">
    <div style="background:var(--color-paper-raised);border:1px solid var(--color-rule);border-radius:6px;padding:28px 32px;width:380px;max-width:90vw;">
        <h3 style="margin-bottom:16px;" id="rename-title">Rename</h3>
        <form method="post" id="rename-form">
            <input type="hidden" name="action" value="rename">
            <input type="hidden" name="list_type" id="rename-list-type">
            <input type="hidden" name="item_id"   id="rename-item-id">
            <div class="field" style="margin-bottom:16px;">
                <label>New Name</label>
                <input type="text" name="name" id="rename-input" required
                       style="font-size:14px;padding:8px 10px;">
            </div>
            <div class="actions-row">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="closeRename()" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
function startRename(type, id, currentName) {
    document.getElementById('rename-list-type').value = type === 'dept' ? 'department' : 'designation';
    document.getElementById('rename-item-id').value   = id;
    document.getElementById('rename-input').value     = currentName;
    document.getElementById('rename-title').textContent = 'Rename ' + (type === 'dept' ? 'Department' : 'Designation');
    var modal = document.getElementById('rename-modal');
    modal.style.display = 'flex';
    document.getElementById('rename-input').focus();
    document.getElementById('rename-input').select();
}
function closeRename() {
    document.getElementById('rename-modal').style.display = 'none';
}
document.getElementById('rename-modal').addEventListener('click', function(e) {
    if (e.target === this) closeRename();
});
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeRename(); });
</script>

{% endblock %}