<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sales Order</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background: #f2f2f2;
            padding: 20px;
        }

        .invoice-container {
            width: 1000px;
            margin: auto;
            background: #fff;
            padding: 20px;
            border: 1px solid #000;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid #000;
            padding: 3px 6px;
            vertical-align: top;
            font-size: 14px;
        }

        .text-center { text-align: center; }
        .text-right  { text-align: right;  }

        /* ── HEADER ── */
        .top-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .logo { width: 100px; }

        .company-details {
            flex: 1;
            text-align: center;
            margin-right: 70px;
        }

        .company-details h1 {
            font-size: 18px;
            margin-bottom: 2px;
            font-weight: 700;
        }

        .company-details p {
            font-size: 14px;
            line-height: 1.3;
        }

        /* ── TITLE ── */
        .invoice-title {
            text-align: center;
            font-size: 26px;
            font-weight: 700;
            margin: 10px 0;
        }

        /* ── ADDRESS ── */
        .address-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 10px;
        }

        .address-card {
            width: 50%;
            vertical-align: top;
            border: 1px solid #cfcfcf;
            padding: 8px;
        }

        .address-title {
            font-size: 14px;
            font-weight: 700;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 5px;
        }

        .company-name {
            font-size: 14px;
            font-weight: 700;
            color: #111;
            line-height: 20px;
            margin-bottom: 6px;
        }

        .address-text {
            font-size: 14px;
            color: #333;
            line-height: 18px;
        }

        .gst-text {
            margin-top: 5px;
            font-size: 14px;
            color: #222;
        }

        /* ── SO DETAILS CARD ── */
        .so-details-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 12px;
        }

        .so-details-card {
            vertical-align: top;
            border: 1px solid #cfcfcf;
            padding: 10px 14px;
        }

        .info-title {
            font-size: 13px;
            font-weight: 700;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 8px;
        }

        .info-text {
            font-size: 14px;
            color: #333;
            line-height: 22px;
        }

        .info-text strong { color: #111; }

        /* ── PRODUCT TABLE ── */
        .product-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 12px;
        }

        .product-table th {
            background: #f3f3f3;
            border: 1px solid #cfcfcf;
            padding: 8px 10px;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: left;
            color: #444;
            letter-spacing: 0.5px;
        }

        .product-table td {
            border: 1px solid #d8d8d8;
            padding: 8px 10px;
            font-size: 14px;
            color: #222;
            line-height: 18px;
        }

        .product-name-col { width: 45%; }
        .qty-col, .uom-col { width: 10%; }
        .rate-col { width: 15%; }
        .gst-col  { width: 10%; }
        .value-col { width: 15%; }

        .product-name { font-weight: 600; }

        .empty-row td { height: 34px; }

        /* ── SUMMARY ── */
        .invoice-summary-wrapper {
            width: 100%;
            margin-top: 14px;
            display: table;
            table-layout: fixed;
        }

        .terms-box, .summary-box {
            display: table-cell;
            vertical-align: top;
            border: 1px solid #cfcfcf;
        }

        .terms-box {
            width: 55%;
            padding: 12px 14px;
        }

        .summary-box { width: 45%; }

        .summary-title {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            color: #666;
            letter-spacing: 0.7px;
            margin-bottom: 10px;
        }

        .terms-content {
            font-size: 14px;
            line-height: 20px;
            color: #333;
        }

        .summary-table { width: 100%; border-collapse: collapse; }

        .summary-table td {
            padding: 8px 12px;
            font-size: 14px;
            color: #222;
            border: 1px solid #d8d8d8;
        }

        .summary-highlight td { font-weight: 700; }

        .total-row td {
            font-size: 14px;
            font-weight: 700;
            background: #f5f5f5;
            color: #111;
        }

        /* ── AMOUNT WORDS ── */
        .amount-words-box {
            margin-top: 14px;
            border: 1px solid #cfcfcf;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 20px;
        }

        .amount-label { font-weight: 700; color: #111; }
        .amount-text  { color: #333; }

        /* ── SIGNATURE ── */
        .signature-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 14px;
        }

        .signature-col {
            width: 33.33%;
            border: 1px solid #cfcfcf;
            padding: 12px;
            vertical-align: top;
            text-align: center;
        }

        .signature-name {
            font-size: 14px;
            font-weight: 700;
            color: #111;
            margin-bottom: 6px;
        }

        .signature-role {
            font-size: 14px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .auth-sign-box { text-align: left; }

        .company-sign {
            font-size: 12px;
            font-weight: 700;
            color: #111;
            line-height: 18px;
        }

        .signature-space { height: 40px; }

        /* ── FOOTER ── */
        .footer-note {
            margin-top: 12px;
            text-align: center;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #dcdcdc;
            padding-top: 8px;
        }

        @media print {
            body { background: #fff; padding: 0; }
            .invoice-container { border: none; }
        }
    </style>
</head>

<body>
    <div class="invoice-container">

        <!-- ── HEADER ── -->
        <div class="top-header">
            <img src="{{logo_url}}" class="logo" />

            <div class="company-details">
                <h1>{{company_name}}</h1>
                <p>{{company_address}}</p>
                <p>PAN No : {{company_cin}}</p>
                <p>GSTIN : {{company_gstin}}</p>
                <p>{{company_email}}, {{company_phone}}</p>
            </div>
        </div>

        <!-- ── TITLE ── -->
        <div class="invoice-title">SALES ORDER</div>

        <!-- ── FROM / TO ── -->
        <table class="address-table">
            <tr>
                <!-- From -->
                <td class="address-card">
                    <div class="address-title">From</div>
                    <div class="company-name">{{company_name}}</div>
                    <div class="address-text">{{company_address}}</div>
                    <div class="gst-text"><strong>GSTIN :</strong> {{company_gstin}}</div>
                </td>

                <!-- To -->
                <td class="address-card">
                    <div class="address-title">To</div>
                    <div class="company-name">{{customer_name}}</div>
                    <div class="address-text">{{customer_address}}</div>
                    <div class="gst-text"><strong>GSTIN :</strong> {{customer_gst}}</div>
                </td>
            </tr>
        </table>

        <!-- ── SO DETAILS ── -->
        <table class="so-details-table">
            <tr>
                <td class="so-details-card" style="width:50%">
                    <div class="info-title">Order Details</div>
                    <div class="info-text">
                        <strong>SO Number :</strong> {{so_number}}<br />
                        <strong>PO Reference :</strong> {{po_reference}}<br />
                        <strong>Order Date :</strong> {{order_date}}<br />
                        <strong>Delivery Date :</strong> {{delivery_date}}
                    </div>
                </td>

                <td class="so-details-card" style="width:50%">
                    <div class="info-title">Payment Details</div>
                    <div class="info-text">
                        <strong>Advance Payment :</strong> {{advance_payment}}<br />
                        <strong>Advance % :</strong> {{advance_percent}}%<br />
                        <strong>Advance Amount :</strong> INR {{advance_amount}}<br />
                        <strong>Payment Status :</strong> {{advance_payment_status}}
                    </div>
                </td>
            </tr>
        </table>

        <!-- ── PRODUCT TABLE ── -->
        <table class="product-table">
            <thead>
                <tr>
                    <th class="product-name-col">Product</th>
                    <th class="qty-col">Qty</th>
                    <th class="uom-col">UOM</th>
                    <th class="rate-col">Rate</th>
                    <th class="gst-col">GST %</th>
                    <th class="value-col">Amount</th>
                </tr>
            </thead>
            <tbody>
                {{items_rows}}
                <tr class="empty-row">
                    <td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr class="empty-row">
                    <td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td>
                </tr>
            </tbody>
        </table>

        <!-- ── TERMS + SUMMARY ── -->
        <div class="invoice-summary-wrapper">
            <div class="terms-box">
                <div class="summary-title">Terms & Conditions</div>
                <div class="terms-content">
                    1. Goods once confirmed will not be cancelled without prior approval.<br />
                    2. Delivery schedule subject to availability.<br />
                    3. Payment to be made as per agreed terms.<br />
                    4. Subject to Hyderabad jurisdiction.
                </div>
            </div>

            <div class="summary-box">
                <table class="summary-table">
                    <tr class="summary-highlight">
                        <td>Subtotal</td>
                        <td class="text-right">INR {{subtotal}}</td>
                    </tr>
                    <tr>
                        <td>GST Amount</td>
                        <td class="text-right">INR {{gst_amount}}</td>
                    </tr>
                    <tr>
                        <td>Round Off</td>
                        <td class="text-right">{{round_off}}</td>
                    </tr>
                    <tr class="total-row">
                        <td>Total Value</td>
                        <td class="text-right">INR {{total}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- ── AMOUNT IN WORDS ── -->
        <div class="amount-words-box">
            <span class="amount-label">Rupees in Words :</span>
            <span class="amount-text">{{amount_words}}</span>
        </div>

        <!-- ── SIGNATURE ── -->
        <table class="signature-table">
            <tr>
                <td class="signature-col">
                    <div class="signature-name">{{prepared_by}}</div>
                    <div class="signature-role">Prepared By</div>
                </td>

                <td class="signature-col">
                    <div class="signature-name">{{approved_by}}</div>
                    <div class="signature-role">Approved By</div>
                </td>

                <td class="signature-col auth-sign-box">
                    <div class="company-sign">
                        <span style="color:#9ca3af;">For</span> {{company_name}}
                    </div>
                    <div class="signature-space"></div>
                    <div class="signature-role">Authorised Signatory</div>
                </td>
            </tr>
        </table>

        <!-- ── FOOTER ── -->
        <div class="footer-note">
            This is a computer generated Sales Order and does not require a physical signature.
        </div>

    </div>
</body>

</html>
