<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: helvetica, sans-serif; font-size: 10pt; color: #333; line-height: 1.4; }
        .header { width: 100%; border-bottom: 2px solid #3b82f6; padding-bottom: 20px; margin-bottom: 20px; }
        .company-details { width: 60%; float: left; }
        .invoice-title { width: 40%; float: right; text-align: right; }
        .invoice-title h1 { color: #3b82f6; margin: 0; font-size: 24pt; text-transform: uppercase; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f3f4f6; color: #1f2937; font-weight: bold; }
        .address-box { width: 48%; display: inline-block; vertical-align: top; margin-bottom: 20px; }
        .summary-box { width: 40%; float: right; }
        .summary-box table th { width: 50%; }
        .words { font-style: italic; font-size: 9pt; margin-top: 10px; }
        .footer { margin-top: 40px; font-size: 9pt; border-top: 1px solid #ddd; padding-top: 10px; color: #666; }
        h3 { margin-top: 0; color: #1f2937; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
    </style>
</head>
<body>
    {{WATERMARK}}
    <div class="header">
        <div class="company-details">
            <h2 style="margin: 0; color: #1f2937; font-size: 16pt;">{{COMPANY_NAME}}</h2>
            <p style="margin: 5px 0;">
                {{COMPANY_ADDRESS}}<br>
                <strong>GSTIN:</strong> {{COMPANY_GSTIN}}<br>
                <strong>Email:</strong> {{COMPANY_EMAIL}} | <strong>Phone:</strong> {{COMPANY_PHONE}}
            </p>
        </div>
        <div class="invoice-title">
            <h1 style="margin: 0; color: #3b82f6; font-size: 28px;">{{DOCUMENT_TITLE}}</h1>
            <p style="margin: 5px 0; font-size: 14px;"><b># {{INVOICE_NUMBER}}</b></p>
            <p style="margin: 5px 0; font-size: 14px; color: #666;">Date: {{INVOICE_DATE}}</p>
            <p>
                <strong>Date:</strong> {{INVOICE_DATE}}<br>
                <strong>Due Date:</strong> {{DUE_DATE}}<br>
                <strong>PO Number:</strong> {{PO_NUMBER}}
            </p>
        </div>
        <div style="clear: both;"></div>
    </div>

    <div style="width: 100%;">
        <div class="address-box">
            <h3>Billed To:</h3>
            <strong>{{CUSTOMER_NAME}}</strong><br>
            {{BILLING_ADDRESS}}<br>
            <strong>GSTIN:</strong> {{CUSTOMER_GSTIN}}<br>
            <strong>Place of Supply:</strong> {{PLACE_OF_SUPPLY}}
        </div>
        <div class="address-box" style="margin-left: 4%;">
            <h3>Shipped To:</h3>
            <strong>{{CUSTOMER_NAME}}</strong><br>
            {{SHIPPING_ADDRESS}}
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th width="5%">#</th>
                <th width="30%">Item / Description</th>
                <th width="10%">HSN/SAC</th>
                <th width="10%" class="text-right">Qty</th>
                <th width="10%" class="text-right">Rate</th>
                <th width="10%" class="text-right">Disc.</th>
                <th width="10%" class="text-right">Taxable</th>
                <th width="5%" class="text-right">Tax%</th>
                <th width="10%" class="text-right">Amount</th>
            </tr>
        </thead>
        <tbody>
            {{ITEMS_ROWS}}
        </tbody>
    </table>

    <div style="width: 100%;">
        <div style="width: 55%; float: left;">
            <h3>GST Summary</h3>
            <table style="font-size: 8pt; width:100%;">
                <thead>
                    <tr>
                        <th width="10%">Rate</th>
                        <th width="15%" class="text-right">Taxable</th>
                        <th width="15%" class="text-right">CGST</th>
                        <th width="15%" class="text-right">SGST</th>
                        <th width="15%" class="text-right">IGST</th>
                        <th width="15%" class="text-right">Cess</th>
                        <th width="15%" class="text-right">Total Tax</th>
                    </tr>
                </thead>
                <tbody>
                    {{GST_SUMMARY_ROWS}}
                </tbody>
            </table>
            
            <div style="margin-top:20px;">
                <strong>Total Amount in Words:</strong><br>
                <span class="words">{{AMOUNT_IN_WORDS}}</span>
            </div>
            
            <div style="margin-top:20px; border: 1px solid #ddd; padding: 10px;">
                <strong>Bank Details:</strong><br>
                Bank Name: _____________________<br>
                Account No: ____________________<br>
                IFSC Code: _____________________
            </div>
        </div>
        
        <div class="summary-box">
            <table>
                <tr>
                    <th>Subtotal:</th>
                    <td class="text-right">{{SUBTOTAL}}</td>
                </tr>
                <tr>
                    <th>Discount:</th>
                    <td class="text-right">-{{DISCOUNT_AMOUNT}}</td>
                </tr>
                <tr>
                    <th>Taxable Amount:</th>
                    <td class="text-right">{{TAXABLE_AMOUNT}}</td>
                </tr>
                <tr>
                    <th>Total Tax:</th>
                    <td class="text-right">{{TOTAL_TAX}}</td>
                </tr>
                <tr>
                    <th>Round Off:</th>
                    <td class="text-right">{{ROUND_OFF}}</td>
                </tr>
                <tr>
                    <th style="font-size: 14pt; color: #3b82f6;">Grand Total:</th>
                    <td style="font-size: 14pt; color: #3b82f6;" class="text-right"><strong>{{GRAND_TOTAL}}</strong></td>
                </tr>
                <tr>
                    <th>Amount Paid:</th>
                    <td class="text-right">{{AMOUNT_PAID}}</td>
                </tr>
                <tr>
                    <th>Balance Due:</th>
                    <td class="text-right"><strong>{{BALANCE_DUE}}</strong></td>
                </tr>
            </table>
            
            <div style="text-align: right; margin-top: 50px;">
                <p>For <strong>{{COMPANY_NAME}}</strong></p>
                <br><br>
                <p>Authorized Signatory</p>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>

    <div class="footer">
        <strong>Terms & Conditions:</strong><br>
        {{TERMS}}<br><br>
        <strong>Notes:</strong><br>
        {{NOTES}}
    </div>
</body>
</html>
