{% extends "base.html" %}
{% block content %}
<style>
body {
    font-family: 'Segoe UI', sans-serif;
    background: #fff;
}

.salary-slip {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    background: #fff;
    position: relative;
}

.watermark {
    position: absolute;
    top: 35%;
    left: 25%;
    font-size: 100px;
    color: rgba(255,165,0,0.1);
    transform: rotate(-30deg);
    z-index: 1;
    pointer-events: none;
}

.salary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #FFA500;
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
}

.salary-header img {
    max-height: 60px;
}

.salary-header h2 {
    margin: 0;
    color: #333;
}

.attendance-summary td {
    padding: 4px 8px;
}

.table th {
    background-color: #FFA500;
    color: white;
    text-align: left;
}

.table td {
    padding: 6px 10px;
}

.columns {
    display: flex;
    justify-content: space-between;
}

.columns .table {
    width: 48%;
}

.footer-note {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
    text-align: right;
}

@page {
    size: A4 landscape;
    margin: 1cm;
}
</style>

<div class="salary-slip">
    <div class="watermark">CONFIDENTIAL</div>
    <div class="salary-header">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Company Logo">
        <h2>Salary Slip – {{ month }}</h2>
    </div>

    <table class="table">
        <tr><th>Employee Name</th><td>{{ employee.full_name }}</td><th>Employee Code</th><td>{{ employee.employee_code }}</td></tr>
        <tr><th>Department</th><td>{{ employee.department.name if employee.department else '' }}</td><th>Designation</th><td>{{ employee.designation.title if employee.designation else '' }}</td></tr>
        <tr><th>Date of Joining</th><td>{{ employee.date_of_joining.strftime('%Y-%m-%d') }}</td><th>Work Mode</th><td>{{ employee.work_mode }}</td></tr>
    </table>

    <div class="columns mt-4">
        <table class="table table-bordered">
            <thead><tr><th colspan="2">Earnings</th></tr></thead>
            <tbody>
                {% for item in earnings %}
                <tr><td>{{ item.head_name }}</td><td>₹{{ '%.2f'|format(item.amount) }}</td></tr>
                {% endfor %}
                <tr><th>Total</th><th>₹{{ '%.2f'|format(payroll.gross_pay) }}</th></tr>
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead><tr><th colspan="2">Deductions</th></tr></thead>
            <tbody>
                {% for item in deductions %}
                <tr><td>{{ item.head_name }}</td><td>₹{{ '%.2f'|format(item.amount) }}</td></tr>
                {% endfor %}
                <tr><th>Total</th><th>₹{{ '%.2f'|format(payroll.deductions) }}</th></tr>
            </tbody>
        </table>
    </div>

    <table class="table table-bordered mt-3">
        <tr><th>Net Pay</th><td colspan="3"><strong>₹{{ '%.2f'|format(payroll.net_pay) }}</strong></td></tr>
        <tr><th>CTC</th><td>₹{{ '%.2f'|format(payroll.ctc or 0) }}</td><th>Freeze Date</th><td>{{ payroll.freeze_date.strftime('%Y-%m-%d') }}</td></tr>
    </table>

    <table class="table attendance-summary mt-4">
        <thead><tr><th colspan="6">Attendance Summary</th></tr></thead>
        <tbody>
            <tr>
                <td><strong>Total Paid Days</strong></td><td>{{ '%.1f'|format(attendance_summary.total_days) }}</td>
                <td><strong>Present</strong></td><td>{{ attendance_summary.present }}</td>
                <td><strong>Leave</strong></td><td>{{ attendance_summary.leave }}</td>
            </tr>
            <tr>
                <td><strong>Holidays</strong></td><td>{{ attendance_summary.holidays }}</td>
                <td><strong>Weekends</strong></td><td>{{ attendance_summary.weekends }}</td>
                <td><strong>LWP</strong></td><td>{{ attendance_summary.lwp }}</td>
            </tr>
        </tbody>
    </table>

    <div class="footer-note">
        <em>Generated on: {{ current_time.strftime('%Y-%m-%d %H:%M') }}</em>
    </div>
</div>
{% endblock %}