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

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

    <style>
        /* ====================================
   GLOBAL
==================================== */

        * {
            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;
        }

        /* ====================================
   COMMON
==================================== */

        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: 13px;
            line-height: 1.3;
        }

        /* ====================================
   INVOICE TITLE
==================================== */

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

        /* ====================================
   ADDRESS TABLE
==================================== */

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

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

        .address-title {
            font-size: 11px;
            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: 13px;
            color: #333;
            line-height: 18px;
        }

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

        /* ====================================
   INFO TABLE
==================================== */

        .info-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 12px;
        }

        .info-card {
            vertical-align: top;
            border: 1px solid #cfcfcf;
            padding: 12px 14px;
        }

        .bank-card {
            width: 31%;
        }

        .transport-card {
            width: 42%;
        }

        .invoice-card {
            width: 27%;
        }

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

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

        .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: 53%;
        }

        .hsn-col,
        .uom-col,
        .qty-col,
        .rate-col {
            width: 9%;
        }

        .value-col {
            width: 11%;
        }

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

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

        /* ====================================
   TERMS & 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: 13px;
            font-weight: 700;
            text-transform: uppercase;
            color: #666;
            letter-spacing: 0.7px;
            margin-bottom: 10px;
        }

        .terms-content {
            font-size: 13px;
            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;
            /* border-bottom: 1px solid #e2e2e2; */
        }

        .summary-table tr:last-child td {
            border-bottom: none;
        }

        .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 TABLE
==================================== */

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

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

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

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

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

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

        .company-sign .light-text {
    font-weight: 400;
}

        .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;
        }

        /* ====================================
   PRINT
==================================== */

        @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">TAX INVOICE</div>

        <!-- Address Section -->
        <table class="address-table">
            <tr>

                <!-- Dispatch From -->
                <td class="address-card dispatch-card">
                    <div class="address-title">Dispatch 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>

                <!-- Ship To -->
                <td class="address-card ship-card">
                    <div class="address-title">Customer / Ship 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>

                <!-- Dispatch Details -->
                <td class="address-card bill-card">
                    <div class="address-title">Dispatch Details</div>

                    <div class="address-text">
                        <strong>Shipment No :</strong> {{shipment_no}}<br />

                        <strong>Sales Order :</strong> {{sales_order_no}}<br />

                        <strong>Dispatch No :</strong> {{dispatch_no}}<br />

                        <strong>Dispatch Date :</strong> {{dispatch_date}}<br />

                        <strong>Movement Type :</strong> {{movement_type}}
                    </div>
                </td>

            </tr>
        </table>

        <!-- Vehicle / Transport / Weight Details -->
        <table class="info-table">
            <tr>

                <!-- Vehicle Details -->
                <td class="info-card bank-card">
                    <div class="info-title">Vehicle Details</div>

                    <div class="info-text">
                        <strong>Vehicle No :</strong> {{vehicle_no}}<br />

                        <strong>Vehicle Type :</strong> {{vehicle_type}}<br />

                        <strong>Vehicle Capacity :</strong> {{vehicle_capacity}}<br />

                        <strong>Driver Name :</strong> {{driver_name}}<br />

                        <strong>Driver Contact :</strong> {{driver_contact}}
                    </div>
                </td>

                <!-- Transport Details -->
                <td class="info-card transport-card">
                    <div class="info-title">Transport Details</div>

                    <div class="info-text">

                        <strong>Transport Mode :</strong> {{transport_mode}}<br />

                        <strong>Transport Agency :</strong> {{transport_agency}}<br />

                        <strong>LR Number :</strong> {{lr_number}}<br />

                        <strong>Eway Bill No :</strong> {{eway_bill_no}}<br />

                        <strong>Seal Number :</strong> {{seal_number}}
                    </div>
                </td>

                <!-- Weight Details -->
                <td class="info-card invoice-card">
                    <div class="info-title">Weight Details</div>

                    <div class="info-text">

                        <strong>Gross Weight :</strong> {{gross_weight}} T<br />

                        <strong>Tare Weight :</strong> {{tare_weight}} T<br />

                        <strong>Net Weight :</strong> {{net_weight}} T<br />

                        <strong>Dispatch Qty :</strong> {{dispatch_qty}}<br />

                        <strong>Weighbridge :</strong> {{weighbridge_name}}
                    </div>
                </td>

            </tr>
        </table>

        <!-- Product Table -->
        <table class="product-table">

            <thead>
                <tr>
                    <th class="product-name-col">Product</th>
                    <th class="hsn-col">HSN</th>
                     <th class="qty-col">Qty</th>
                    <th class="uom-col">UOM</th>
                   
                    <th class="rate-col">Rate</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>

        <!-- Summary -->
        <!-- Summary -->
        <div class="invoice-summary-wrapper">

            <!-- Terms -->
            <div class="terms-box">

                <div class="summary-title">
                    Terms
                </div>

                <div class="terms-content">

                    1. Goods once sold will not be taken back.
                    <br />

                    2. Subject to Hyderabad jurisdiction.
                    <br />

                    3. Payment to be made as per agreed terms.

                </div>

            </div>

            <!-- Amount Summary -->
            <div class="summary-box">

                <table class="summary-table">

                    <tr class="summary-highlight">
                        <td>Net Weight</td>
                        <td class="text-right">
                            {{net_weight}} T
                        </td>
                    </tr>

                    <tr>
                        <td>Gross Amount</td>
                        <td class="text-right">
                            {{gross_amount}}
                        </td>
                    </tr>

                    <tr>
                        <td>Discount</td>
                        <td class="text-right">
                            {{discount_amount}}
                        </td>
                    </tr>

                    <tr>
                        <td>Tax Amount</td>
                        <td class="text-right">
                            {{tax_amount}}
                        </td>
                    </tr>

                    <tr class="total-row">
                        <td>Total Amount</td>
                        <td class="text-right">
                            INR {{total_amount}}
                        </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">
                Rupees Twenty Seven Lakhs Sixteen Thousand Four Hundred Ninety Three
                Only
            </span> -->
            <span class="amount-text">
                {{amount_words}}
            </span>
        </div>

        <!-- Signature -->
        <table class="signature-table">

            <tr>

                <!-- Prepared By -->
                <td class="signature-col">

                    <div class="signature-name">
                        {{prepared_by}}
                    </div>

                    <div class="signature-role">
                        Prepared By
                    </div>

                </td>

                <!-- Security -->
                <td class="signature-col">

                    <div class="signature-name">
                        {{security_name}}
                    </div>

                    <div class="signature-role">
                        Approved By
                    </div>

                </td>

                <!-- Weighbridge Operator -->
                <!-- <td class="signature-col">

                    <div class="signature-name">
                        {{weighbridge_operator}}
                    </div>

                    <div class="signature-role">
                        Weighbridge Operator
                    </div>

                </td> -->

                <!-- Authorized -->
                <td class="signature-col auth-sign-box">

                    <div class="company-sign">
                        <!-- For {{company_name}} -->
                          <span class="light-text">For</span> {{company_name}}
                    </div>

                    <div class="signature-space"></div>

                    <!-- <div class="signature-name">
                        {{approved_by}}
                    </div> -->

                    <div class="signature-role">
                        Authorised Signatory
                    </div>

                </td>

            </tr>

        </table>

        <!-- Footer -->
        <div class="footer-note">

            This is a computer generated dispatch invoice and does not require a physical signature.

        </div>

    </div>
</body>

</html>