<!DOCTYPE html>
<html>
<head>
    <style>
        @page { margin: 1cm; footer: html_myfooter; }
        body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10pt; color: #333; margin: 0; }
        
        .header { margin-bottom: 20px; }
        .logo { float: left; width: 30%; }
        .company-info { float: right; width: 60%; text-align: right; }
        .company-name { font-size: 16pt; font-weight: bold; color: #000; margin-bottom: 5px; }
        .company-details { font-size: 10pt; color: #555; line-height: 1.4; }
        
        .title-line { clear: both; text-align: center; margin: 30px 0; position: relative; border-bottom: 1px solid #eee; height: 10px; }
        .title-line span { background: #fff; padding: 0 20px; font-size: 18pt; font-weight: 300; letter-spacing: 5px; color: #333; }
        
        .billing-section { width: 100%; margin-bottom: 30px; }
        .bill-to { width: 50%; float: left; }
        .ship-to { width: 40%; float: left; margin-left: 10%; }
        .invoice-meta { width: 30%; float: right; text-align: right; }
        
        .label { font-size: 9pt; color: #888; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }
        .client-name { font-size: 12pt; font-weight: bold; color: #000; margin-bottom: 5px; }
        .address-text { line-height: 1.4; color: #444; }
        
        .doc-number { font-size: 18pt; font-weight: bold; color: #000; }
        
        .summary-box { clear: both; width: 100%; margin: 25px 0; border: 1px solid #2ea35f; border-radius: 4px; overflow: hidden; }
        .summary-header { background: #2ea35f; color: #fff; }
        .summary-header th { padding: 8px 15px; font-size: 9pt; text-align: left; font-weight: normal; border-right: 1px solid rgba(255,255,255,0.2); }
        .summary-body td { padding: 12px 15px; font-size: 10pt; font-weight: bold; color: #333; border-right: 1px solid #eee; }
        .summary-header th:last-child, .summary-body td:last-child { border-right: none; }
        
        .items-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        .items-header { background: #2ea35f; color: #fff; }
        .items-header th { padding: 12px; font-size: 9pt; text-transform: uppercase; text-align: left; font-weight: bold; }
        .items-body td { padding: 15px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
        
        .totals-block { margin-top: 30px; }
        .thanks-note { width: 50%; float: left; margin-top: 20px; padding: 15px; border-left: 3px solid #2ea35f; background: #f9fdfa; color: #2ea35f; font-weight: bold; }
        .totals-table-wrap { width: 40%; float: right; background: #fdfdfd; padding: 15px; border-radius: 4px; border: 1px solid #f0f0f0; }
        .totals-row { width: 100%; margin-bottom: 8px; clear: both; height: 20px; }
        .total-label { float: left; width: 60%; text-align: right; color: #666; font-size: 10pt; }
        .total-value { float: right; width: 35%; text-align: right; font-weight: bold; font-size: 10pt; color: #333; }
        
        .grand-total-wrap { border-top: 2px solid #2ea35f; margin-top: 10px; padding-top: 10px; }
        .grand-total-label { font-size: 12pt; font-weight: bold; color: #000; }
        .grand-total-value { font-size: 13pt; font-weight: bold; color: #2ea35f; }
        
        .balance-highlight { background: #eef7f0; margin: 15px -15px -15px -15px; padding: 15px; border-top: 1px solid #d4ece1; }
        
        .bottom-section { clear: both; margin-top: 60px; font-size: 9pt; border-top: 1px solid #eee; padding-top: 20px; }
        .terms-title { font-weight: bold; color: #000; margin-bottom: 5px; text-transform: uppercase; font-size: 9pt; }
        .terms-body { color: #666; line-height: 1.5; }
    </style>
</head>
<body>
    {{WATERMARK}}
    <div class="header">
        <div class="logo">
            {{COMPANY_LOGO}}
        </div>
        <div class="company-info">
            <div class="company-name">{{COMPANY_NAME}}</div>
            <div class="company-details">
                {{COMPANY_ADDRESS}}<br>
                GSTIN: {{COMPANY_GSTIN}}<br>
                {{COMPANY_EMAIL}}
            </div>
        </div>
    </div>

    <div class="title-line">
        <span>{{DOCUMENT_TITLE}}</span>
    </div>

    <div class="billing-section">
        <div class="bill-to">
            <div class="label">Bill To</div>
            <div class="client-name">{{CUSTOMER_NAME}}</div>
            <div class="address-text">{{BILLING_ADDRESS}}</div>
        </div>
        
        <div class="invoice-meta">
            <div class="label" style="margin-bottom: 0;">Invoice#</div>
            <div class="doc-number" style="margin-bottom: 10px;">{{INVOICE_NUMBER}}</div>
            
            <div class="label" style="margin-bottom: 0;">PO Number</div>
            <div style="font-weight: bold; margin-bottom: 10px;">{{PO_NUMBER}}</div>
        </div>
        <div style="clear: both;"></div>
        
        <div class="ship-to" style="margin-top: 20px; margin-left: 0;">
            <div class="label">Ship To</div>
            <div class="address-text">{{SHIPPING_ADDRESS}}</div>
        </div>
    </div>

    <table class="summary-box" cellpadding="0" cellspacing="0">
        <tr class="summary-header">
            <th>Invoice Date</th>
            <th>Terms</th>
            <th>Due Date</th>
        </tr>
        <tr class="summary-body">
            <td>{{INVOICE_DATE}}</td>
            <td>Due on Receipt</td>
            <td>{{DUE_DATE}}</td>
        </tr>
    </table>

    <table class="items-table">
        <thead>
            <tr class="items-header">
                <th width="5%">#</th>
                <th>Item & Description</th>
                <th width="12%" style="text-align: right;">Qty</th>
                <th width="15%" style="text-align: right;">Rate</th>
                <th width="15%" style="text-align: right;">Amount</th>
            </tr>
        </thead>
        <tbody class="items-body">
            {{ITEMS_ROWS}}
        </tbody>
    </table>

    <div class="totals-block">
        <div class="thanks-note">
            Thanks for your business.
        </div>
        
        <div class="totals-table-wrap">
            <div class="totals-row">
                <span class="total-label">Sub Total</span>
                <span class="total-value">{{SUBTOTAL}}</span>
            </div>
            <div class="totals-row">
                <span class="total-label">Tax Rate</span>
                <span class="total-value">{{TAX_SUMMARY_SIMPLE}}</span>
            </div>
            <div class="totals-row">
                <span class="total-label">Discount</span>
                <span class="total-value">-{{DISCOUNT_AMOUNT}}</span>
            </div>
            
            <div class="grand-total-wrap">
                <div class="totals-row">
                    <span class="total-label grand-total-label">Total</span>
                    <span class="total-value grand-total-value">{{GRAND_TOTAL}}</span>
                </div>
                
                <div class="balance-highlight">
                    <div class="totals-row" style="margin-bottom: 0;">
                        <span class="total-label" style="font-weight: bold; color: #000;">Balance Due</span>
                        <span class="total-value" style="font-size: 11pt; color: #000;">{{BALANCE_DUE}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>

    <div class="bottom-section">
        <div class="terms-title">Terms & Conditions</div>
        <div class="terms-body">
            {{TERMS}}
        </div>
        
        <div class="terms-title" style="margin-top: 15px;">Notes</div>
        <div class="terms-body">
            {{NOTES}}
        </div>
    </div>

</body>
</html>
