<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="report_payslip_document">
        <t t-call="web.html_container">
            <t t-foreach="docs" t-as="o">
                <t t-call="web.external_layout">
                    <div class="page" style="font-family: Arial, sans-serif;">

                        <!-- ============================================ -->
                        <!-- Header                                       -->
                        <!-- ============================================ -->
                        <div class="row mb-3">
                            <div class="col-12 text-center">
                                <h2 style="color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px;">
                                    <strong>PAYSLIP</strong>
                                </h2>
                            </div>
                        </div>

                        <!-- ============================================ -->
                        <!-- Employee &amp; Period Details                 -->
                        <!-- ============================================ -->
                        <div class="row mb-4" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px;">
                            <div class="col-6">
                                <table class="table table-borderless table-sm mb-0">
                                    <tr>
                                        <td><strong>Employee:</strong></td>
                                        <td><span t-field="o.employee_id.name"/></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Department:</strong></td>
                                        <td><span t-field="o.employee_id.department_id.name"/></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Job Position:</strong></td>
                                        <td><span t-field="o.employee_id.job_id.name"/></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-6">
                                <table class="table table-borderless table-sm mb-0">
                                    <tr>
                                        <td><strong>Period:</strong></td>
                                        <td>
                                            <span t-field="o.date_from"/> —
                                            <span t-field="o.date_to"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Company:</strong></td>
                                        <td><span t-field="o.company_id.name"/></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Status:</strong></td>
                                        <td><span t-field="o.state"/></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <!-- ============================================ -->
                        <!-- Earnings Table                               -->
                        <!-- ============================================ -->
                        <h4 style="color: #27ae60; margin-top: 20px;">
                            <i class="fa fa-plus-circle"/> Earnings
                        </h4>
                        <table class="table table-bordered table-sm">
                            <thead style="background-color: #27ae60; color: white;">
                                <tr>
                                    <th>Component</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Basic Salary</td>
                                    <td class="text-end">
                                        <span t-field="o.basic"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>House Rent Allowance (HRA)</td>
                                    <td class="text-end">
                                        <span t-field="o.hra"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Other Allowances</td>
                                    <td class="text-end">
                                        <span t-field="o.allowances"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr style="font-weight: bold; background-color: #eafaf1;">
                                    <td>Gross Salary</td>
                                    <td class="text-end">
                                        <span t-field="o.gross_salary"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- ============================================ -->
                        <!-- Deductions Table                             -->
                        <!-- ============================================ -->
                        <h4 style="color: #e74c3c; margin-top: 20px;">
                            <i class="fa fa-minus-circle"/> Deductions
                        </h4>
                        <table class="table table-bordered table-sm">
                            <thead style="background-color: #e74c3c; color: white;">
                                <tr>
                                    <th>Component</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr t-if="o.pf_deduction > 0">
                                    <td>Provident Fund (PF)</td>
                                    <td class="text-end">
                                        <span t-field="o.pf_deduction"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr t-if="o.esi_deduction > 0">
                                    <td>Employee State Insurance (ESI)</td>
                                    <td class="text-end">
                                        <span t-field="o.esi_deduction"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr t-if="o.professional_tax > 0">
                                    <td>Professional Tax</td>
                                    <td class="text-end">
                                        <span t-field="o.professional_tax"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                                <tr style="font-weight: bold; background-color: #fdedec;">
                                    <td>Total Deductions</td>
                                    <td class="text-end">
                                        <span t-field="o.total_deductions"
                                              t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- ============================================ -->
                        <!-- Net Salary — Highlighted                     -->
                        <!-- ============================================ -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <tr style="background-color: #2c3e50; color: white; font-size: 18px;">
                                        <td class="py-3"><strong>NET SALARY PAYABLE</strong></td>
                                        <td class="text-end py-3">
                                            <strong>
                                                <span t-field="o.net_salary"
                                                      t-options='{"widget": "monetary", "display_currency": o.company_id.currency_id}'/>
                                            </strong>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <!-- ============================================ -->
                        <!-- Footer note                                  -->
                        <!-- ============================================ -->
                        <div class="row mt-4">
                            <div class="col-12 text-center text-muted" style="font-size: 11px;">
                                <p>This is a computer-generated payslip and does not require a signature.</p>
                            </div>
                        </div>

                    </div>
                </t>
            </t>
        </t>
    </template>
</odoo>
