{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3>Salary Slip Preview – {{ month }}/{{ year }}</h3>
    <hr>

    <h5>Employee: {{ emp.full_name }}</h5>
    <p>Employee Code: {{ emp.employee_code }}</p>

    <div class="row mt-4">
        <div class="col-md-6">
            <h5>Earnings</h5>
            <table class="table table-bordered">
                <thead><tr><th>Component</th><th>Amount (₹)</th></tr></thead>
                <tbody>
                {% set total_earnings = 0 %}
                {% for comp in components.earnings %}
                    <tr>
                        <td>{{ comp.name }}</td>
                        <td>{{ "%.2f"|format(comp.amount) }}</td>
                    </tr>
                    {% set total_earnings = total_earnings + comp.amount %}
                {% endfor %}
                <tr><th>Total</th><th>{{ "%.2f"|format(total_earnings) }}</th></tr>
                <tr><th>Total</th><th>{{ "%.2f"|format(earnings) }}</th></tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-6">
            <h5>Deductions</h5>
            <table class="table table-bordered">
                <thead><tr><th>Component</th><th>Amount (₹)</th></tr></thead>
                <tbody>
                {% for name, amt in components.deductions.items() %}
                    <tr><td>{{ name }}</td><td>{{ "%.2f"|format(amt) }}</td></tr>
                {% endfor %}
                <tr><th>Total</th><th>{{ "%.2f"|format(deductions) }}</th></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4">
        <h5>Summary</h5>
        <table class="table table-bordered w-50">
            <tr><th>CTC</th><td>₹ {{ "%.2f"|format(ctc) }}</td></tr>
            <tr><th>Gross Pay</th><td>₹ {{ "%.2f"|format(gross) }}</td></tr>
            <tr><th>Net Pay</th><td><strong>₹ {{ "%.2f"|format(net) }}</strong></td></tr>
            <tr><th>Paid Days</th><td>{{ paid_days }}</td></tr>
        </table>
    </div>

    <div class="mt-4">
        <h5>Attendance Summary</h5>
        <table class="table table-bordered w-50">
            <tr><th>Present</th><td>{{ present }}</td></tr>
            <tr><th>Half Day</th><td>{{ half }}</td></tr>
            <tr><th>Leave</th><td>{{ leave }}</td></tr>
            <tr><th>Holiday</th><td>{{ holiday }}</td></tr>
            <tr><th>Weekends</th><td>{{ weekends }}</td></tr>
            <tr><th>LWP</th><td>{{ lwp }}</td></tr>
        </table>
    </div>
</div>
{% endblock %}