<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice {{invoice_number}}</title>
    <style>
        body { font-family: Open Sans; font-size: 11px; }
        .invoice-container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .header-table { width: 100%;}
        .invoice-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        .invoice-table th, .invoice-table td { border: 1px solid #dee2e6; padding: 8px; }
        .text-right { text-align: right; }
        /*.totals-table { width: 35%; margin-left: 60%; }*/
        .terms { font-size: 10px; color: #666; margin-top: 30px; }
        .col-no { width: 5%; text-align: center; }
        .col-desc { width: 45%; text-align: left;}
        .col-qty { width: 10%; text-align: center; }
        .col-rate { width: 20%; text-align: right; }
        .col-amount { width: 20%; text-align: right; }
    </style>
</head>
<body>
    <div class="invoice-container">
        <div style="vertical-align: top; padding-buttom: 15px; display: flex;">
            <table class="header-table">
                <tr>
                    <td style="width: 40%; vertical-align: buttom;">
                        <img src="templates/logo.png" alt="Logo" style="width: 200px;">
                    </td>
                    <td style="width: 60%; text-align: right; vertical-align: middle; margin-bottom: 30px;">
                        <p style="margin: 0; max-width: 250px; display: inline-block; text-align: right;">
                            <strong style="font-size: 14px; margin-bottom: 5px;">{{company_name}}</strong><br>
                            {{#company_address}}
                            {{address1}}<br>
                            {{#address2}}{{address2}}<br>{{/address2}}
                            {{city}}, {{state}} {{zip}}
                            {{/company_address}}
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <div style="position: relative;">
            <hr style="color: #dee2e6;">
            <div style="position: absolute; top: -14px; left: 40%; background-color: white; padding: 0 10px;">
                <span style="margin: 0; font-size: 24px; color: #2F81B7;">INVOICE</span>
            </div>
        </div>
        <table style="width: 100%; ">
            <tr>
                <td style="width: 60%; vertical-align: top;">
                    <p >Bill To:</p>
                    <p style="margin: 0;">
                        {{customer_name}}<br>
                        {{#customer_address}}
                        {{address}}<br>
                        {{city}}, {{state}} {{zip}}<br>
                        {{country}}
                        {{/customer_address}}
                    </p>
                </td>
                <td style="width: 40%; ">
                    <table style="width: 100%; margin-left: auto;">
                        <tr>
                            <td class="text-right"><strong>Invoice#:</strong></td>
                            <td class="text-right">{{invoice_number}}</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>Invoice Date:</strong></td>
                            <td class="text-right">{{invoice_date}}</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>Terms:</strong></td>
                            <td class="text-right">{{terms}}</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>Due Date:</strong></td>
                            <td class="text-right">{{due_date}}</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>PO Number:</strong></td>
                            <td class="text-right">{{po}}</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>Quote Number:</strong></td>
                            <td class="text-right">{{quote}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    
        <table class="invoice-table" style="width: 100%;">
            <thead>
                <tr style="background-color: #E8F7FE; padding: 10px 7px 5px;">
                    <th class="col-no" >#</th>
                    <th class="col-desc" >Item Description</th>
                    <th class="col-qty" >Qty</th>
                    <th class="col-rate" >Rate</th>
                    <th class="col-amount" >Amount</th>
                </tr>
            </thead>
            <tbody>
                {{#line_items}}
                <tr style="padding: 10px 7px 5px;">
                    <td class="col-no">{{no}}</td>
                    <td class="col-desc">{{description}}</td>
                    <td class="col-qty">{{quantity}}</td>
                    <td class="col-rate">{{rate}}</td>
                    <td class="col-amount">{{amount}}</td>
                </tr>
                {{/line_items}}
            </tbody>
        </table>
        <table style="width: 100%; ">
            <tr>
                <td style="width: 50%; vertical-align: top;">
                    <p style="font-size: 10px;">Note: {{note}}</p>
                </td>
                <td style="width: 50%; ">
                    <table style="width: 100%;">
                        <tr>
                            <td style="padding: 5px; text-align: right; width: 70%"><strong>Sub Total:</strong></td>
                            <td style="padding: 5px; text-align: right; width: 30%">{{subtotal}}</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px; text-align: right; width: 70%"><strong>DPP Nilai lain:</strong></td>
                            <td style="padding: 5px; text-align: right; width: 30%">{{dpp}}</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px; text-align: right; width: 70%"><strong>PPN 12%:</strong></td>
                            <td style="padding: 5px; text-align: right; width: 30%">{{ppn}}</td>
                        </tr>
                        <tr style="border-top: 1px solid #dee2e6;">
                            <td style="padding: 5px; text-align: right; width: 70%"><strong>Total:</strong></td>
                            <td style="padding: 5px; text-align: right; width: 30%"><strong>IDR {{total}}</strong></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div class="terms">
            <h3 style="font-size: 10px;">Please make (FULL AMOUNT) payment to one of the following bank accounts:</h3>
            
            <p>Bank BCA - KCP Darmo Indah Timur - Surabaya<br>
            PT. EIKON Technology<br>
            A/C: 4700 281 987 (IDR)</p>

            <p>PANIN Bank - Sukomanunggal - Surabaya<br>
            PT. EIKON Technology<br>
            A/C: 442 508 4858 (IDR)</p>

            <h3 style="font-size: 10px;">Terms & Conditions</h3>
            <p>{{term_condition}}</p>
        </div>
    </div>
    <footer style="position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; margin-top: 0px; font-size: 10px; color: #666; background-color: white;">
        <hr style="color: #dee2e6;">
        <p>Thank you for your business<br>
        PT. EIKON Technology guarantees 100% customer's satisfaction<br>
        We are looking forward to working with you</p>
    </footer>
</body>
</html>
