{% extends "base.html" %}
{% block title %}Fixed Constants — Admin{% endblock %}
{% block content %}
<div class="space-y-4">
    <a href="/admin/?token={{ token }}" class="text-sm text-gray-400 hover:text-gray-600">← Admin Panel</a>
    <h1 class="text-2xl font-bold sw-blue-text">Fixed Constants</h1>
    <p class="text-gray-500 text-sm">Edit the percentages used for Client Executive and Complex Claims rows.</p>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="w-full text-sm">
            <thead><tr class="sw-blue text-white">
                <th class="px-4 py-3 text-left">Key</th>
                <th class="px-4 py-3 text-left">Description</th>
                <th class="px-4 py-3 text-center w-32">Value</th>
                <th class="px-4 py-3 text-center w-24">Save</th>
            </tr></thead>
            <tbody>
            {% for c in constants %}
            <tr class="{{ 'bg-gray-50' if loop.index % 2 == 0 }}">
                <td class="px-4 py-3 font-mono font-semibold sw-blue-text">{{ c.key }}</td>
                <td class="px-4 py-3 text-gray-600">{{ c.description }}</td>
                <td class="px-4 py-3 text-center">
                    <input type="number" id="const_{{ c.id }}" value="{{ c.value }}" step="0.5"
                           class="w-20 border rounded px-2 py-1 text-sm text-center">
                </td>
                <td class="px-4 py-3 text-center">
                    <button onclick="saveConst({{ c.id }})" class="text-blue-600 hover:underline text-sm">Save</button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
const authToken = '{{ token }}';
const authHeaders = {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken};

async function saveConst(id) {
    const val = parseFloat(document.getElementById('const_' + id).value);
    await fetch('/admin/api/constants/' + id, {
        method: 'POST', headers: authHeaders,
        body: JSON.stringify({ value: val }),
    });
    // Brief flash to confirm
    const input = document.getElementById('const_' + id);
    input.style.backgroundColor = '#d4edda';
    setTimeout(() => input.style.backgroundColor = '', 1000);
}
</script>
{% endblock %}