{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3 class="mb-4"><i class="bi bi-calculator"></i> Salary Formula Configuration</h3>

    <form method="POST" action="{{ url_for('payroll.salary_formula') }}">
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Component Type</label>
                <select class="form-select" name="component_type" id="component_type" required>
                    <option value="">Select Type</option>
                    <option value="earning">Earning</option>
                    <option value="deduction">Deduction</option>
                    <option value="ctc">CTC</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Component</label>
                <select class="form-select" name="component_id" id="component_id" required>
                    <option value="">Select Component</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Formula</label>
                <input type="text" name="formula" class="form-control" placeholder="e.g., 0.5 * gross" required>
            </div>
        </div>

        <button class="btn btn-primary" type="submit"><i class="bi bi-plus-circle"></i> Add Formula</button>
    </form>

    <hr class="my-4">

    <h5>Existing Formulas</h5>
    <table class="table table-sm table-bordered">
        <thead>
            <tr>
                <th>Component Type</th>
                <th>Component</th>
                <th>Formula</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for f in formulas %}
            <tr>
                <td>{{ f.component_type.capitalize() }}</td>
                <td>
                    {% for comp in all_components %}
                        {% if comp.id == f.component_id and comp.type == f.component_type %}
                            {{ comp.name }}
                        {% endif %}
                    {% endfor %}
                </td>
                <td>{{ f.formula }}</td>
                <td>
                    <form method="POST" action="{{ url_for('payroll.delete_salary_formula', formula_id=f.id) }}" onsubmit="return confirm('Are you sure you want to delete this formula?');">
                        <button type="submit" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i> Delete</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    const allComponents = {{ all_components | tojson }};
    const componentTypeSelect = document.getElementById('component_type');
    const componentSelect = document.getElementById('component_id');

    componentTypeSelect.addEventListener('change', function () {
        const selectedType = this.value;
        componentSelect.innerHTML = '<option value="">Select Component</option>';

        const filtered = allComponents.filter(c => c.type === selectedType);
        filtered.forEach(comp => {
            const opt = document.createElement('option');
            opt.value = comp.id;
            opt.textContent = comp.name;
            componentSelect.appendChild(opt);
        });
    });
</script>
{% endblock %}