<odoo>
  <record id="action_report_travel_bills" model="ir.actions.report">
        <field name="name">Travel Bills Reimbursement Form</field>
        <field name="model">sos_travel_reimbursement_bills</field>
        <field name="report_type">qweb-pdf</field>
        <field name="report_name">sos_installation_commision.report_travel_bills</field>
        <field name="report_file">sos_installation_commision.report_travel_bills</field>
        <field name="binding_model_id" eval="False"/>
        <field name="binding_type">report</field>
    </record>

<template id="report_travel_bills">
    <t t-call="web.html_container">
        <t t-foreach="docs" t-as="o">
            <t t-call="web.external_layout">
             <link rel="stylesheet" href="/sos_inventory/static/src/css/style.css" />
                <div class="page">

                    <h2 style="text-align:center">Travel Bills Reimbursement Form</h2>
                    <br></br>
                    <!-- HTML Table -->
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td class="column">Travel Id</td><td><t t-esc="o.plan_id.plan_id"/></td>
                            
                                <td class="column">Claimed By</td><td><t t-esc="o.claimed_by.name"/></td>
                            </tr>
                            <tr>
                            <td class="column">Customer Name</td>
                            <td><t t-esc="o.customer_name"/></td>
                            <td class="column">Location</td>
                            <td><t t-esc="o.customer_location"/></td>
                            </tr>
                            <tr>
                            <td class="column">Type</td>
                            <td colspan="3">
                            <t t-if="o.travel_type == 'installation'">Installation &amp; Commissioning</t>
                            <t t-elif="o.travel_type == 'service'">Service</t>
                            <t t-elif="o.travel_type == 'demo'">Demo</t>
                            <t t-elif="o.travel_type == 'validation'">Validation</t>
                            <t t-elif="o.travel_type == 'warranty'">Warranty Call</t>
                            <t t-elif="o.travel_type == 'amc'">AMC/Cloud Service</t>
                            <t t-else="">Not Specified</t>
                        </td>
                           
                            </tr>
        
                        </tbody>
                    </table>
   <table class="table table-bordered"> 
   <tr style="background-color:#ccc"><td class="column">Total Expenses</td><td class="column"><b><t t-esc="o.total_expense"/></b></td></tr>  
   </table>
<!-- Set the total item count -->
<t t-set="total_items" t-value="len(o.line_ids)"/>

<!-- Display the first 5 items (or fewer) in the first table -->
<table class="table table-bordered">
    <tbody>
     <tr style="background-color:#ccc"><td class="column" colspan="5">Expenses</td></tr>
     
      <tr class="column">
                <td>Date</td>
                <td>Purpose</td>
                <td>Expense Type</td>
                <td>Cost</td>
                <td>Remarks</td>
            </tr>
        <!-- Render the first 5 items -->
        <t t-foreach="o.line_ids" t-as="line_items">
            <tr>
                  <td><t t-esc="line_items.date_of_expense"/></td>
                    <td><t t-esc="line_items.purpose"/></td>
                    <td>
                            <t t-if="line_items.expense_type == 'food'">Food</t>
                            <t t-elif="line_items.expense_type == 'accomadation'">Accomadation</t>
                            <t t-elif="line_items.expense_type == 'travel'">Travel</t>
                            <t t-elif="line_items.expense_type == 'purchase'">Purchase</t>
                            <t t-elif="line_items.expense_type == 'recharge'">Recharge</t>
                            <t t-elif="line_items.expense_type == 'contract'">Contract Labour</t>
                            <t t-else="">Not Specified</t>
                        </td>
                    <td><t t-esc="line_items.cost"/></td>
                    <td><t t-esc="line_items.remarks"/></td>
            </tr>
        </t>
    </tbody>
</table>
 <!-- <div style="page-break-after: always;">
</div> -->

  <div style="width: 100%; display: flex; justify-content: space-between; margin-top: 50px;">

<table class="table table-bordered">

        <tr style="background-color:#ccc">
        <td style="padding: 8px;" class="column"><b>Role </b></td>
            <td style="padding: 8px;" class="column"><b>Authorized Signatory </b></td>
            <td style="padding: 8px;" class="column"><b>Authorized On</b></td>
            <td style="padding: 8px;" class="column"><b>Authorized By</b></td>
        </tr>
        <tr>
        <td>User</td>
            <td><img style="height:80px;width:100px" t-if="o.prepared_by_image" t-att-src="'data:image/png;base64,%s' % (o.prepared_by_image.decode())"/></td>

            <td><t t-esc="o.prepared_on"/></td>
             <td><t t-esc="o.prepared_by_name.name"/></td>
        </tr>
        <tr>
        <td>Department Incharge</td>
            <td><img style="height:80px;width:100px" t-if="o.dept_in_charge_image" t-att-src="'data:image/png;base64,%s' % (o.dept_in_charge_image.decode())"/></td>

            <td><t t-esc="o.dept_in_charge_approved_on"/></td>
             <td><t t-esc="o.dept_in_charge_name.name"/></td>
        </tr>
        <tr>
        <td>Accounts Incharge</td>
            <td><img style="height:80px;width:100px" t-if="o.accounts_approved_by_image" t-att-src="'data:image/png;base64,%s' % (o.accounts_approved_by_image.decode())"/></td>

            <td><t t-esc="o.accounts_approved_on"/></td>
             <td><t t-esc="o.accounts_approved_name.name"/></td>
        </tr>
        <tr>
        <td>Top Management</td>
            <td><img style="height:80px;width:100px" t-if="o.top_management_approval_image" t-att-src="'data:image/png;base64,%s' % (o.top_management_approval_image.decode())"/></td>

            <td><t t-esc="o.top_management_approved_on"/></td>
             <td><t t-esc="o.top_management_name.name"/></td>
        </tr>
      
    </table>

</div>
            




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

</odoo>
