{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3>{{ employee.full_name }} ({{ employee.employee_code }}) - Salary Details</h3>

    <h5 class="mt-4">Summary</h5>
    <p><strong>Gross Earnings:</strong> ₹{{ "%.2f"|format(gross) }}</p>
    <p><strong>Total Deductions:</strong> ₹{{ "%.2f"|format(total_deductions) }}</p>
    <p><strong>Net Pay:</strong> ₹{{ "%.2f"|format(net_pay) }}</p>
    <p><strong>CTC:</strong> ₹{{ "%.2f"|format(ctc) }}</p>

    <a href="{{ url_for('payroll.salary_structure', employee_id=employee.id) }}" class="btn btn-warning">
        <i class="bi bi-pencil-square"></i> Edit Salary Structure
    </a>


    <h5 class="mt-4 text-primary">Earnings</h5>
    <table class="table table-bordered">
        <thead><tr><th>Component</th><th>Amount (₹)</th></tr></thead>
        <tbody>
            {% for e in earnings %}
            <tr><td>{{ e.name }}</td><td>{{ "%.2f"|format(e.amount) }}</td></tr>
            {% endfor %}
        </tbody>
    </table>

    <h5 class="mt-4 text-danger">Deductions</h5>
    <table class="table table-bordered">
        <thead><tr><th>Component</th><th>Amount (₹)</th></tr></thead>
        <tbody>
            {% for d in deductions %}
            <tr><td>{{ d.name }}</td><td>{{ "%.2f"|format(d.amount) }}</td></tr>
            {% endfor %}
        </tbody>
    </table>

</div>
{% endblock %}